Angular 2 路由器未设置 base href

Question

我遇到错误，但找不到原因。这是错误：

EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).
    angular2.dev.js:23514 EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 ORIGINAL EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1154(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1157(anonymous function) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(anonymous function) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(anonymous function) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305
    angular2.dev.js:23514 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
        at new BaseException (angular2.dev.js:8080)
        at new PathLocationStrategy (router.dev.js:1203)
        at angular2.dev.js:1380
        at Injector._instantiate (angular2.dev.js:11923)
        at Injector._instantiateProvider (angular2.dev.js:11859)
        at Injector._new (angular2.dev.js:11849)
        at InjectorDynamicStrategy.getObjByKeyId (angular2.dev.js:11733)
        at Injector._getByKeyDefault (angular2.dev.js:12048)
        at Injector._getByKey (angular2.dev.js:12002)
        at Injector._getByDependency (angular2.dev.js:11990)

有谁知道路由器为什么抛出这个？我正在使用 angular2 beta

这是我的代码：

import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import {LoginComponent} from './pages/login/login.component';
import {DashboardComponent} from './pages/dashboard/dashboard.component';
@Component({
    selector: 'app',
    directives:[ROUTER_DIRECTIVES],
    template:`
        <div class="wrapper">
            <router-outlet></router-outlet>
        </div>`
})
@RouteConfig([
    { path: '/',redirectTo: '/dashboard' },
    { path: '/login',name:'login',component: LoginComponent },
    { path: '/dashboard',name:'dashboard',component: DashboardComponent,}
])
export class AppComponent {
}

Answer 1

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.

<base href="/"> 告诉 Angular 路由器什么是 URL 的静态部分。然后路由器只修改 URL.

的剩余部分

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

或者添加

>=Angular2 RC.6

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

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

在你的 bootstrap.

在旧版本中，导入必须像

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

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

import {APP_BASE_HREF} from 'angular2/router';

>=beta.17

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

另见

Answer 2

自 2.0 测试版开始:)

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

Answer 3

您还可以通过在 app.module.ts

中包含以下内容来使用 hash-based 导航

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

并将以下内容添加到@NgModule({ ... })

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

》HashLocationStrategy——在URL后面加上一个井号（#），hash后的URL段唯一标识要作为网页片段使用的路由。此策略适用于所有浏览器，包括旧浏览器。”

摘自：Yakov Fain Anton Moiseev。 “Angular 2 使用 TypeScript 进行开发。”

Answer 4

我在 Angular4 和 Jasmine 单元测试中遇到过类似的问题；下面给出的解决方案对我有用

添加下面的导入语句

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

为 TestBed 配置添加以下语句：

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})

Answer 5

使用 angular 4，您可以通过更新 app.module.ts 文件来解决此问题，如下所示：

在顶部添加导入语句如下：

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

并在 @NgModule

内添加下行

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

参考：https://angular.io/api/common/APP_BASE_HREF

Answer 6

只是在index.html head标签中添加以下代码

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

这对我来说就像一个魅力。

Answer 7

检查你的 index.html。如果你不小心把下面的部分去掉了，把它包含进去就可以了

<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

Answer 8

Angular 7,8 修复在 app.module.ts

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

在@NgModule 内添加

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

Angular 2 路由器未设置 base href

Angular 2 router no base href set

routes

href

angular