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. 对于cocos2d-x lua的防护措施

    自从cocos2d-x 用了 luajit之后,对于我们用lua开发的开发者来说,可是一个好消息,不单性能提升了不少,更重要的是在lua加密方面省了不少心,为什么,就是因为,luajit编译的字节码, ...

  2. JavaScript操作DOM的那些坑

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...

  3. 不定高度的div背景或背景图片不显示问题

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...

  4. 前端复习－01-dom操作包括ie和现代浏览器处理相关

    一.事件流事件流描述的是从页面中接受事件的顺序.IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1.事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然 ...

  5. 判定元素正在插入到DOM树——DOMNodeInsertedIntoDocument

    在firefox, webkit中我们可以使用DOMNodeInsertedIntoDocument事件,但这个事件很快变废弃了,虽然浏览器还是很有节操地支持它们,但哪一天不在也很难说.比如说fire ...

  6. HD1004Let the Balloon Rise

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...

  7. C++ 之关联容器 map

    标准库定义了四种关联容器:map是其中之一(另外还有set.multimap.multiset).map的元素以键-值(key-value),在学了顺序容器之后,再学习关联容器,就比较比较好理解了. ...

  8. ]用EnumChildWindows遍历窗口的方法

    最近项目有需要,得到一个非自己实现的窗口控件对象.于是想起曾经做过类似功能.总结如下: 调用EnumChildWindows(this->m_hWnd, EnumChildProc, NULL) ...

  9. input value的值不可改变

    同样是东钿微信服务平台,使用积分的问题,原来的版本是,默认用户不使用积分,也就没有给input赋值,后面华总说默认让用户使用积分,于是我就信誓旦旦把从后台得到用户可使用的积分赋在input上,后来,用 ...

  10. UI：页面传值、单例模式传值、属性传值、NSUserDefaults 数据持久化

    <单页面传值> 页面传值,从前向后传值,使用属性,在后一个页面定义属性,在前一个页面,用点语法,获得值,在适当的时候传值 页面传值,从后向前面传值,使用协议和代理,在后一个页面指定协议,定 ...