发表新帖
发表新帖

Angular 2 router no base href set

前端 未结
关注
8 913
半阙折子戏
半阙折子戏 2020-11-22 15:19

I am getting an error and can\'t find why. Here is the error:

EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Loc
相关标签:
8条回答
  • 说谎
    2020-11-22 15:48

    https://angular.io/docs/ts/latest/guide/router.html

    Add the base element just after the <head> tag. If the app folder is the application root, as it is for our application, set the href value exactly as shown here.

    The <base href="/"> tells the Angular router what is the static part of the URL. The router then only modifies the remaining part of the URL.

    <head>
  <base href="/">
  ...
</head>

    Alternatively add

    >= Angular2 RC.6

    import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  declarations: [AppComponent],
  imports: [routing /* or RouterModule */], 
  providers: [{provide: APP_BASE_HREF, useValue : '/' }]
]);

    in your bootstrap.

    In older versions the imports had to be like

    < Angular2 RC.6

    import {APP_BASE_HREF} from '@angular/common';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  {provide: APP_BASE_HREF, useValue : '/' });
]);

    < RC.0

    import {provide} from 'angular2/core';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : '/' });
]);

    < beta.17

    import {APP_BASE_HREF} from 'angular2/router';

    >= beta.17

    import {APP_BASE_HREF} from 'angular2/platform/common';

    See also Location and HashLocationStrategy stopped working in beta.16

    0 讨论(0)
  • 轮回少年
    2020-11-22 15:50

    Since 2.0 beta :)

    import { APP_BASE_HREF } from 'angular2/platform/common';
    0 讨论(0)
  • 灰色年华
    2020-11-22 15:54

    it is just that add below code in the index.html head tag

       <html>
    <head>
     <base href="/">
      ...

    that worked like a charm for me.

    0 讨论(0)
  • 故里飘歌
    2020-11-22 15:55

    With angular 4 you can fix this issue by updating app.module.ts file as follows:

    Add import statement at the top as below:

    import {APP_BASE_HREF} from '@angular/common';

    And add below line inside @NgModule

    providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]

    Reff: https://angular.io/api/common/APP_BASE_HREF

    0 讨论(0)
  • 萌比男神i
    2020-11-22 15:56

    Angular 7,8 fix is in app.module.ts 

    import {APP_BASE_HREF} from '@angular/common';

    inside @NgModule add

    providers: [{provide: APP_BASE_HREF, useValue: '/'}]

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-22 15:58

    You can also use hash-based navigation by including the following in app.module.ts

    import { LocationStrategy, HashLocationStrategy } from '@angular/common';

    and by adding the following to the @NgModule({ ... })

    @NgModule({
  ...
  providers:    [
      ProductService, {
          provide: LocationStrategy, useClass: HashLocationStrategy
      }
  ],
  ...
})

    “HashLocationStrategy—A hash sign (#) is added to the URL, and the URL segment after the hash uniquely identifies the route to be used as a web page fragment. This strategy works with all browsers, including the old ones.”

    Excerpt From: Yakov Fain Anton Moiseev. “Angular 2 Development with TypeScript.”

    0 讨论(0)
 看不清?
提交回复
热议问题