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. bzoj1193

    #include<cstdio> #include<cstdlib> #include<algorithm> #include<queue> using ...

  2. Windows 下命令行修改文件夹的控制权限 Cacls

    设置用户访问权限:我们经常要修改目录和文件的访问权限,使用Cacls命令就很容易做到.下面要赋予本机用户testuser对d盘下 test目录及其所有子目录中的文件有完全控制权限.在命令提示符对话框中 ...

  3. 黑马程序员——Objective-c特性

    1. 继承  Objective-c不支持多继承. Super 关键字:调用该类的父类: 超类:父类的另一种说法. 2.自定义NSLog()输出: 在类中添加description方法就可以自定义NS ...

  4. ubuntu下apt-get update出现hash校验和错误

    可能原因 校园网进行网络缓存导致内容滞后. 解决办法 先清除旧的apt-get更新列表 sudo rm -rf /var/lib/apt/lists/* 使用代理服务器或者VPN 重新更新 sudo ...

  5. JavaScript之Object

    两种简单的JavaScript中定义对象的方式: 在JavaScript中,可以动态添加对象的属性,也可以动态删除对象的属性. var object=new object(); //alert(obj ...

  6. Strider 持续集成(gitlab)

    Strider安装后运行: Mac: strider Ubuntu: bin/strider 本地运行时浏览器访问: http://127.0.0.1:3000 其他服务器:服务器地址 + 端口号(3 ...

  7. 隐藏StatusBar 非setStatusBarHidden

    UIWindow * window = [[UIApplication sharedApplication].windows lastObject]; 隐藏 [window setWindowLeve ...

  8. php 的简单易用的调式方法，打印方法

    简单的调试方法:echo, print_r, var_dump, exit, debug_backtrace(), debug_print_backtrace(), gettype(), get_cl ...

  9. 2016 CCPC 杭州站 小结

    5题倒数第一,铜……(我就知道我们很稳!!!哼!! 这一次心态完全爆炸 开场我就没有按照平时的顺序读题 然后zr的A题wa 我F题T xl说B是一个最小生成树,又说是最小树形图,不会写 K题完全没思路 ...

  10. 主题敏感词PageRank

    [主题敏感词PageRank] PageRank忽略了主题相关性,导致结果的相关性和主题性降低,对于不同的用户,甚至有很大的差别.例如,当搜索“苹果”时,一个数码爱好者可能是想要看 iphone 的信 ...