The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.

If the base href is not set, app will have error. The easiest way to do it set base href in html:

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>WikiSearch</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-root>Loading...</app-root>

</body>

</html>

Sometimes though, coders of an Angular application don’t have access to the head section of the
application HTML. This is true for instance, when reusing headers and footers of a larger, preexisting
application.
Fortunately there is a workaround for this cases. You can declare the application base path
programmatically, when bootstrapping the Angular application:

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    appRoutes,

    BrowserModule,

    FormsModule,

    HttpModule,

    JsonpModule,

    SharedServiceModule.forRoot()

  ],

  providers: [

    {provide: APP_BASE_HREF, useValue: '/'},

    {

      provide: API_URL,

      useValue: `https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK`

    }

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

[Angular2 Router] Understand the Angular 2 Base href Requirement的更多相关文章

  1. [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

    In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...

  2. [Angular2 Router] Lazy Load Angular 2 Modules with the Router

    Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start ...

  3. [Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched

    Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the inp ...

  4. [Angular2 Router] Resolving route data in Angular 2

    From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know ...

  5. [Angular2 Router] Auxiliary Routes bit by bit

    Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...

  6. JSP中<base href="<%=basePath%>">作用

    通常在JSP页面开通有如下代码: <% String path = request.getContextPath(); String basePath = request.getScheme() ...

  7. <base href="<%=basePath%>

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. JSP中<base href="<%=basePath%>">的作用

    来源于:http://fanshuyao.iteye.com/blog/2097229 首先了解是什么是<base href=""> <base href=&qu ...

  9. JSP页面中 <base href="<%=basePath%>">

    base标记是一个基链接标记,是一个单标记.用以改变文件中所有连结标记的参数内定值.它只能应用于标记<head>与</head>之间.你网页上的所有相对路径在链接时都将在前面加 ...

随机推荐

  1. JavaScript 性能优化 --By Google V8 Team Manager

    原文:https://developers.google.com/v8/?hl=zh-CN Be Prepared before writing code[9:35] Understand how V ...

  2. The remote SSH server rejected X11 forwarding request

    两台相同的虚拟机,一台没有错误,一个经常出现警告,内容如下所示: The remote SSH server rejected X11 forwarding request 找了很多方法,最后发现是安 ...

  3. sqlite使用小结

    官方网站 http://www.sqlite.org/index.html 图形前端 http://www.sqlabs.net/sqlitemanager.php 个人觉得firefox的sqlit ...

  4. shell学习目录

    1. 了解shell 2. shell 入门基础 3. Shell脚本文件中常用的操作语句

  5. DataGrid Column Group （合并表头）

    <thead> <tr> <th colspan=">swjg</th> <th colspan=">swbm</ ...

  6. Latex 横排图片

    \begin{figure} \begin{minipage}[t]{0.5\linewidth} \centering \includegraphics[width=2.2in]{figure/an ...

  7. MYSQL数据库性能调优之八：mysql日志

    MySQL日志 主要包含:错误日志.查询日志.慢查询日志.事务日志.二进制日志.中继日志: 使用 SHOW GLOBAL VARIABLES LIKE '%log%';  查询所有日志配置详情: 一. ...

  8. 如何在Centos上安装python3.4

    Centos上面默认的Python版本是2.6,本文介绍如何安装3.4版本. 0.下载前准备 需要安装以下库,不然会有问题. yum -y install zlib-devel bzip2-devel ...

  9. SPI移位寄存器

    spi移位寄存器即是spi的数据寄存器,在stm32中数据手册是这样描述的:

  10. 使用MSSQL，连接oracle，对oracle数据进行操作

    EXEC sp_addlinkedserver--创建链接服务器.链接服务器让用户可以对 OLE DB 数据源进行分布式异类查询. @server = 'Mktg',--要创建的链接服务器的名称.s ...