zoukankan      html  css  js  c++  java
  • [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 { }
  • 相关阅读:
    Django学习笔记之Cookie、Session和自定义分页
    sass表达式前后出现空格
    render总结
    vue双向绑定补充说明方法
    mutation与action
    keep-alive使用笔记
    this指向 一般函数与箭头函数
    vue-router原理分析
    history新增方法
    常用阻止ajax缓存方法集锦
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5909208.html
Copyright © 2011-2022 走看看