[Angular2 Router] Understand the Angular 2 Base href Requirement

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 { }

 

posted @ 2016-09-26 14:55  Zhentiw  阅读(765)  评论(0)  编辑  收藏  举报