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. JDT入门

    1.打开Java类型 要打开一个Java类或Java接口以进行编辑,可以执行以下操作之一: 在编辑器中所显示的源代码里选择所要编辑的Java类或Java接口的名字(或者简单地将插入光标定位到所要编辑的 ...

  2. 传统IT大佬们，路在何方？

    [文/ 任英杰] 2014年第一季度季报陆续出台,互联网公司无疑仍是璀璨明星,一路凯歌,而与互联网企业的蒸蒸日上形成鲜明对照的是传统IT企业的集体黯然失色.分析一下传统IT大佬们发布的数据,用友营业收 ...

  3. The serializable class does not declare a static final serialVersionUID field of type long

    在编译以下Java程序时,出现The serializable class  does not declare a static final serialVersionUID field of typ ...

  4. [转载]我读过最好的Epoll模型讲解

    转载来自:http://blog.csdn.net/mango_song/article/details/42643971 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行 ...

  5. BITED-Windows8应用开发学习札记之三：如何在Win8应用中实现数据绑定

    在微软官方提供的资源中,我们可以看到SampleDataSource.cs已经拥有了定义好了相应的数据结构以及实现类: 建立本地数据 由于我们已经有数据以及相应的数据类,我们需要做的仅仅是将数据放进数 ...

  6. python堡垒机

    堡垒机 windows下安装python3的paramiko模块后一些报错总结: error: Unable to find vcvarsall.bat [官网对此问题的描述] : https://d ...

  7. NServiceBus教程-NServiceBus和WCF

    WCF中缺少的最主要的事情是发布/订阅,但为什么你必须建立它自己吗?NServiceBus,你把它弄出来. 下一个重要的事情是容错.异常导致WCF代理休息,需要"刷新"的代码,但调 ...

  8. SCAU 10690 分面包

    10690 分面包 时间限制:1000MS  内存限制:65535K 题型: 编程题   语言: 无限制 Description 在大一的时候,XCC还在stu union打酱油~~~~和十三还有奶子 ...

  9. 一些推荐的spark/hadoop课程

    为了分享给你们,也为自己. 感谢下面的老师们! 1.王家林DT大数据梦工厂的大数据IMF传奇行动课程 总的目录是: 第一阶段:Linux和Java零基础企业级实战 第二阶段:Hadoop和Hive零基 ...

  10. [翻译]创建ASP.NET WebApi RESTful 服务（9）

    一旦成功的发布API后,使用者将依赖于你所提供的服务.但是变更总是无法避免的,因此谨慎的制定ASP.NET Web API的版本策略就变得非常重要.一般来说,新的功能需要无缝的接入,有时新老版本需要并 ...