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. bzoj 3757 苹果树（树上莫队算法）

    [题意] 有若干个询问,询问路径u,v上的颜色总数,另外有要求a,b,意为将a颜色看作b颜色. [思路] vfk真是神系列233. Quote: 用S(v, u)代表 v到u的路径上的结点的集合. 用 ...

  2. WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0x80000002. Windows RegCreateKeyEx(...) returned error code 5

    以下是我的程序(取自headfirst Java): import javax.sound.midi.*; public class MiniMiniMusicApp { public static ...

  3. Winform後台如何動態修改App.config文件里的內容

    以下方法修改的,自己添加的app.config裡面不會顯示出修改的東西. 方法一:通過使用System.Xml.XmlDocument對象的方法進行bin\debug\~.vshost.exe.Con ...

  4. 【一段日子荟萃】where should I go.

    当<UNIX环境高级编程>和<鸟哥的私房菜>到我的桌头的时候,我忽然产生了厌倦的心. NO,我不是想做这个,我不是想学习这个操作系统的结构和接口. 我想些一个操作系统,更一般的 ...

  5. Java学习日志-01-Hello World

    1.安装JDK1.7 2.安装eclipse 3.eclipse上写第一个java程序-hello world 先建工程,再建包,养成良好的习惯,然后新建类 若不先建立包,可能会提示"The ...

  6. 实现JQuery EasyUI右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

  7. UVaLive 7503 Change （坑题。。。。。。）

    题意:给定两个人民币,问你花最少钱保证能够凑出另一个价格. 析:这个题最大的坑就是在,并一定是一次就凑出来,可以多次,然后就可以想了,如果要凑的数和1有关,特判,如果是2倍数,0.01就够了,否则就是 ...

  8. C# JackLib系列之Form窗体的ShowWithoutActivation属性及其作用

    代码改变世界! 如果要显示顶级窗口,但又不希望由于将输入焦点从当前窗口移开而中断用户的工作,请使用此属性.它可以是一个信息性弹出窗口或浮动窗口,如“画图”应用程序中的“工具”调色板. 由于此属性为只读 ...

  9. AForge学习笔记(列表)

    AForge学习笔记(11):AForge.Imaging.Textures Clouds texture:具有云彩的纹理效果,示例如下:             CloudsTexture text ...

  10. zookeeper的安装和启动

    最近的手上一个项目要用到dubbo,顺便研究下zookeeper 1.下载 下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/,下载解压到D:\t ...