[英]Angular 2 router no base href set
我遇到錯誤,找不到原因。 這是錯誤:
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 {
}
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 : '/' }]
]);
在你的引導程序中。
在舊版本中,導入必須像
< 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';
我在 Angular4 和 Jasmine 單元測試中遇到過類似的問題; 下面給出的解決方案對我有用
添加以下導入語句
import { APP_BASE_HREF } from '@angular/common';
為 TestBed 配置添加以下語句:
TestBed.configureTestingModule({
providers: [
{ provide: APP_BASE_HREF, useValue : '/' }
]
})
Angular 7,8 修復在 app.module.ts 中
import {APP_BASE_HREF} from '@angular/common';
在@NgModule 里面添加
providers: [{provide: APP_BASE_HREF, useValue: '/'}]
您還可以通過在 app.module.ts 中包含以下內容來使用基於哈希的導航
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
並將以下內容添加到 @NgModule({... })
@NgModule({
...
providers: [
ProductService, {
provide: LocationStrategy, useClass: HashLocationStrategy
}
],
...
})
“HashLocationStrategy——在URL中添加井號(#),hash后的URL段唯一標識要用作網頁片段的路由。 這種策略適用於所有瀏覽器,包括舊瀏覽器。”
摘錄自:Yakov Fain Anton Moiseev。 “使用 TypeScript 進行 Angular 2 開發。”
自 2.0 測試版以來:)
import { APP_BASE_HREF } from 'angular2/platform/common';
只是在 index.html head 標簽中添加以下代碼
<html>
<head>
<base href="/">
...
這對我來說就像一個魅力。
使用 Angular 4,您可以通過更新app.module.ts文件來解決此問題,如下所示:
在頂部添加 import 語句,如下所示:
import {APP_BASE_HREF} from '@angular/common';
並在@NgModule
中添加以下行
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
參考: https ://angular.io/api/common/APP_BASE_HREF
檢查您的 index.html。 如果你不小心把下面的部分刪掉了,把它包含進去就可以了
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.