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. Java核心 --- 泛型

    CoreJava 泛型 java泛型的出现避免了强制类型转换,便于代码更好的被阅读 本文的写作参照了张孝祥的泛型介绍:http://www.itcast.cn/news/dbfd20f1/f4b1/4 ...

  2. C语言实现strcpy

    strcpy.h: #ifndef STRCPY_H #define STRCPY_H #include <stdio.h> char *cat_strcpy(char *dst, con ...

  3. Hive QL

    转自http://www.alidata.org/archives/581 Hive 的官方文档中对查询语言有了很详细的描述,请参考:http://wiki.apache.org/hadoop/Hiv ...

  4. effective c++：private继承

    如果class间使用private继承关系,编译器就不会自动的将派生类转换为基类,而且private继承而来的成员都变为private属性. private继承意味着根据某物实现出,当我们想要避免重复 ...

  5. WinForm 根据屏幕分辨率自适应

    方法来自百度, 不算太好,但目前能满足需求.(窗口在LOAD的时候记录每个控件的坐标,每次窗口重绘的时候引时SizeChange事件,根据比率重新设置坐标) 以下是代码  AutoSizeFormCl ...

  6. ubuntu14.04修复启动项

    自从安装了ubuntu14.04系统后(win7+ubuntu双系统),一直使用grub来引导win7和ubuntu,很长一段时间都使用的很好.突然前两天win7进不去了,无奈之下就用pe修复了win ...

  7. 本人为项目组制定的一份页面优化指南（easyui页面优化方案）

    #本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...

  8. 版本控制：SVN中Branch/tag的使用 -摘自网络

    在SVN中Branch/tag在一个功能选项中,在使用中也往往产生混淆. 在实现上,branch和tag,对于svn都是使用copy实现的,所以他们在默认的权限上和一般的目录没有区别.至于何时用tag ...

  9. <转载>gcc/g++编译

    转载于:http://www.cnblogs.com/yc_sunniwell/archive/2010/07/22/1782678.html 1. gcc/g++在执行编译工作的时候,总共需要4步 ...

  10. 在VS2012中实现Ext JS的智能提示

    Visual Studio 2012太强大了,居然能自己会去提取Ext JS的类的属性和方法,从而实现只能提示.下面就来介绍一下实现这个功能. 在Visual Studio 2012中随便创建一个We ...