Angular 2 路由器没有基本的 href 集 [英] Angular 2 router no base href set

查看：34
本文介绍了Angular 2 路由器没有基本的 href 集的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我收到错误消息，但找不到原因.这是错误:

例外:LocationStrategy 实例化过程中出错！(RouterOutlet -> Router -> Location -> LocationStrategy).angular2.dev.js:23514 例外:LocationStrategy 实例化期间出错！(RouterOutlet -> Router -> Location -> LocationStrategy).BrowserDomAdapter.logError @ angular2.dev.js:23514BrowserDomAdapter.logGroup @ angular2.dev.js:23525ExceptionHandler.call @ angular2.dev.js:1145(匿名函数) @ angular2.dev.js:14801NgZone._notifyOnError @ angular2.dev.js:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(匿名函数).@angular2.dev.js:5700runjs:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$$internal$$tryCatch @angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @angular2-polyfills.js:1523lib$espromise$$internal$$publish @ angular2-polyfills.js:1494(匿名函数)@angular2-polyfills.js:243microtask @angular2.dev.js:5751run @angular2-polyfills.js:138(匿名函数)@angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305angular2.dev.js:23514 原始例外:没有设置基本的 href.请为 APP_BASE_HREF 令牌提供一个值或在文档中添加一个基本元素.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(匿名函数) @angular2.dev.js:5719zoneBoundFn@angular2.fills2: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(匿名函数)@angular2-polyfills.js:243microtask@angular2.dev.js:5751run@angular2-polyfills.js:138(匿名函数)@angular2.dev.js:5719zoneBoundFn@angular2-polyfill.js:111lib$es6$promise$asap$$flush@angular2-polyfills.js:1305angular2.dev.js:23514 原始堆栈跟踪:BrowserDomAdapter.logError @ angular2.dev.js:23514ExceptionHandler.call @ angular2.dev.js:1157(匿名函数)@ angular2.dev.js:14801NgZone._notular2dev.Errorjs:5796collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:5700run @ angular2-polyfills.js:141(匿名函数)@ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111m$es6$internal$$tryCatch @ angular2-polyfills.js:1511lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:1523lib$es6$promise$$internal$$publish @ angular2-polyfills.js:1494(匿名函数) @ angular2-polyfills.js:243microtask @ angular2.dev.js:5751run @ angular2-polyfills.js:138(匿名函数) @ angular2.dev.js:5719zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305angular2.dev.js:23514 错误:没有设置基本的 href.请为 APP_BASE_HREF 令牌提供值或向文档添加基本元素.在新的 BaseException (angular2.dev.js:8080)在新的 PathLocationStrategy (router.dev.js:1203)在 angular2.dev.js:1380在 Injector._instantiate (angular2.dev.js:11923)在 Injector._instantiateProvider (angular2.dev.js:11859)在 Injector._new (angular2.dev.js:11849)在 InjectorDynamicStrategy.getObjByKeyId (angular2.dev.js:11733)在 Injector._getByKeyDefault (angular2.dev.js:12048)在 Injector._getByKey (angular2.dev.js:12002)在 Injector._getByDependency (angular2.dev.js:11990)

有谁知道路由器为什么会抛出这个?我正在使用 angular2 测试版

这是我的代码:

import {Component} from 'angular2/core';从 'angular2/router' 导入 { RouteConfig, ROUTER_DIRECTIVES };从 './pages/login/login.component' 导入 {LoginComponent}；从'./pages/dashboard/dashboard.component'导入{DashboardComponent}；@成分({选择器:'应用'，指令:[ROUTER_DIRECIVES]，模板:`<div class="wrapper"><路由器插座></路由器插座>

`})@RouteConfig([{ path: '/',redirectTo: '/dashboard' },{ path: '/login',name:'login',component: LoginComponent },{ path: '/dashboard',name:'dashboard',component: DashboardComponent,}])导出类 AppComponent {}

解决方案

https://angular.io/docs/ts/latest/guide/路由器.html

<块引用>

在 标签之后添加基本元素.如果 app 文件夹是应用程序根目录，就像我们的应用程序一样，请设置 href 值完全，如下所示.

告诉 Angular 路由器 URL 的静态部分是什么.然后路由器只修改 URL 的其余部分.

<base href="/">...

或者添加

>= Angular2 RC.6

从'@angular/common'导入{APP_BASE_HREF}；@NgModule({声明:[AppComponent]，进口:[路由/*或RouterModule */]，提供者:[{提供:APP_BASE_HREF，useValue:'/'}]]);

在你的引导程序中.

在旧版本中，导入必须像

从'@angular/common'导入{APP_BASE_HREF}；引导程序(应用程序组件，[ROUTER_PROVIDERS，{提供:APP_BASE_HREF，useValue:'/' });]);

import {provide} from 'angular2/core';引导程序(应用程序组件，[ROUTER_PROVIDERS，提供(APP_BASE_HREF，{useValue:'/'})；]);

<测试版.17

从'angular2/router'导入{APP_BASE_HREF}；

>= beta.17

从'angular2/platform/common'导入{APP_BASE_HREF}；

另见 Location 和 HashLocationStrategy 在测试版中停止工作.16

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

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)

Does anyone know why the router is throwing this? I am using angular2 beta

here is my code:

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

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

这篇关于Angular 2 路由器没有基本的 href 集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆