Angular 2路由器没有基地href设置
我收到错误，找不到原因。 这是错误：
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) 有谁知道为什么路由器扔这个？ 我正在使用angular2testing版
这里是我的代码：
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 { }
https://angular.io/docs/ts/latest/guide/router.html
在
<head>标签之后添加基本元素。 如果app文件夹是应用程序根目录，就像我们的应用程序一样，请按照此处所示完全设置href值。
<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 : '/' }] ]);
在你的引导。
在旧版本的import必须是
<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';
另请参阅Location和HashLocationStrategy在beta.16中停止工作
由于2.0testing版:)
import { APP_BASE_HREF } from 'angular2/platform/common';
你也可以通过在app.module.ts中包含以下内容来使用基于散列的导航
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
并通过将以下内容添加到@NgModule（{…}）
@NgModule({ ... providers: [ ProductService, { provide: LocationStrategy, useClass: HashLocationStrategy } ], ... })
“HashLocationStrategy – 将散列符号（＃）添加到URL中，哈希后面的URL段唯一标识要用作网页片段的路由。 这个策略适用于所有的浏览器，包括旧的浏览器。“
摘录自：Yakov Fain Anton Moiseev。 “用TypeScript开发Angular 2”
我曾遇到与Angular4和Jasmineunit testing类似的问题; 下面给出的解决scheme为我工作
添加下面的导入语句
import { APP_BASE_HREF } from '@angular/common';
为TestBedconfiguration添加以下语句：
TestBed.configureTestingModule({ providers: [ { provide: APP_BASE_HREF, useValue : '/' } ] })
