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. html --- VML --- javascript --- 旋转矩形

    矢量标记语言 --- Vector Markup Language 运行它的代码需要打开IE的兼容性视图 如有疑问请参考:http://msdn.microsoft.com/en-us/library ...

  2. c/c++ 数字转成字符串, 字符串转成数字

    c/c++ 数字转成字符串, 字符串转成数字 ------转帖 数字转字符串: 用C++的streanstream: #include <sstream> #Include <str ...

  3. Swift相关图书推荐

    Swift与Cocoa框架开发 作      者 [澳] 曼宁(Jonathon Manning),巴特菲尔德-艾迪生(Paris Buttfield 出 版 社 人民邮电出版社 出版时间 2015- ...

  4. CSS width：100%和width：auto的区别

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  5. HBase高性能复杂条件查询引擎---二级多列索引

    http://www.infoq.com/cn/articles/hbase-second-index-engine 原理 “二级多列索引”是针对目标记录的某个或某些列建立的“键-值”数据,以列的值为 ...

  6. HDU5874：Friends and Enemies

    题目链接: Friends and Enemies 分析: 是一道想法题,我们假设x个人互相敌对,然后有y个人与这x个人都是朋友,而这y个人互相敌对. 则有 x+y=m x*y<=n 举个例子: ...

  7. python 字符串，数组，元祖操作基础巩固。

    由于上个星期有点忙,没时间来抽空记一些有用的东西.丢了比较久的python很多忘记的小操作我也会重新捡起来 以前最容易搞混的 str.split() #操作会生成一个数组对象.example:'lap ...

  8. 【原】创建Hive表，分号分隔符“；”引起的异常

    [障碍再现] 在创建支持Map数据结构的Hive表时,抛出如下异常 hive> create table tab_map(name string,info map<string,strin ...

  9. http://blogs.msdn.com/b/pranavwagh/archive/2007/03/03/word-2007-file-seems-to-be-deleted-when-you-open-and-save-it-using-dsoframer.aspx

    http://blogs.msdn.com/b/pranavwagh/archive/2007/03/03/word-2007-file-seems-to-be-deleted-when-you-op ...

  10. C++11空指针

    [C++11空指针] 早在 1972 年,C语言诞生的初期,常数 0 带有常数及空指针的双重身分. C 使用 preprocessor macro NULL 表示空指针, 让 NULL 及 0 分别代 ...