Angular 2路由器未设置基本href

195

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

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 {
}
routing  angular 
— 杰森·斯派克
source

Answers:

376

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

在<head>标签之后添加基本元素。如果该app文件夹是应用程序根目录（对于我们的应用程序而言），则完全按照此处显示的方式设置该href值。

该<base href="https://stackoverflow.com/">告诉角度路由器网址是什么的静态部分。然后，路由器仅修改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';

另请参见Location和HashLocationStrategy停止在beta.16中工作。

— 贡特·佐赫鲍尔（GünterZöchbauer）
source
3
第二种方式的小例子：bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— malloc4k '16
1
我必须添加导入行import {provide} from 'angular2/core';才能使用provide。
— CorayThan，2016年
2
我必须导入线import {APP_BASE_HREF} from 'angular2/router';
— jimmystormig，2016年
感谢您的更新。我自己不使用TS（仅使用Dart），而且我对TS的了解仍然有限。
— 君特Zöchbauer
1
我的项目中的SVG元素充满了图像图案。这些图像是在Firefox当从未显示的<base href="https://stackoverflow.com/" />文件中的设定（对于"/"，"./"，"#"或任何其他碱路径，无论怎样的图像路径自己在图案中指定）。最终有效的唯一解决方案是改为使用APP_BASE_HREF。真正的救星！
— ConnorsFan
34

我在Angular4和Jasmine单元测试中也遇到过类似的问题。下面给出的解决方案为我工作

在进口声明下方添加

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

为TestBed配置添加以下语句：

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
— Dilip Nannaware
source
11

您还可以通过在app.module.ts中包含以下内容来使用基于哈希的导航

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

并将以下内容添加到@NgModule（{...}）

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

使用TypeScript开发Angular 2

“ HashLocationStrategy-哈希符号（＃）被添加到URL，并且哈希之后的URL段唯一地标识了用作网页片段的路由。这种策略适用于所有浏览器，包括旧的浏览器。”

摘录自：雅科夫·法恩·安东·莫伊谢夫。“使用TypeScript开发Angular2。”

— 莱昂内尔·莫里森
source
谢谢莱昂内尔！这非常好，并且解决了我使用上面的APP_BASE_HREF解决方案时遇到的问题，当使用“ product /：id”之类的url参数时，该解决方案失败。谢谢！
— 斯托克利
6

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

   <html>
    <head>
     <base href="https://stackoverflow.com/">
      ...

对我来说就像是一种魅力。

— 纳兰·基兰
source
5

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

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

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

并在里面添加以下行 @NgModule

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

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

— 苏雷什·卡姆鲁西（Suresh Kamrushi）
source
为什么useValue必须为'/ my / app'？
— Dilip Nannaware
5

Angular 7,8修复程序在app.module.ts中 

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

在@NgModule里面添加

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

— 张峰
source
我在尝试为角度故事书加载组件时遇到了此错误。该组件具有路由器依赖性。它解决了错误！
— Arpan Banerjee
1

检查您的index.html。如果您不小心删除了以下部分，请将其包括在内就可以了

<base href="https://stackoverflow.com/">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
— 塔德勒·艾勒格（Tadele Ayelegn）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.