Angular2 beta 出现异常“没有路由器提供者！（RouterLink -> 路由器）”

Posted 2023-03-13

【中文标题】Angular2 beta 出现异常“没有路由器提供者！（RouterLink -> 路由器）”

【英文标题】：Angular2 beta getting exception "No provider for Router! (RouterLink -> Router)"

【发布时间】：2016-05-14 14:49:21

【问题描述】：

这两天我一直在努力解决这个问题。我正在尝试在 Angular2 beta0.0.2 中实现一些简单的路由。请注意，我使用的是 typescript。

所以我的理解是我需要使用 ROUTER_PROVIDERS 引导我的根应用程序组件，以便我的 who 应用程序可以使用这些服务并为组件设置指令想要实现到 ROUTER_DIRECTIVES 的路由。

这是我所拥有的：

//ANGULAR  ******************************
import provide, Component from 'angular2/core';
import bootstrap from 'angular2/platform/browser';
import 
        APP_BASE_HREF,
        ROUTER_DIRECTIVES,
        ROUTER_PROVIDERS,
        HashLocationStrategy,
        LocationStrategy,
        RouteConfig,
         from 'angular2/router';

//COMPONENTS  ******************************
import ShiftCalendarComponent from './components/calendar/shift-calendar.component';
import ShiftAdminComponent from './components/admin/shift-admin.component';
import ShiftListComponent from './components/shifts/shift-list.component';

//CLASS  ******************************
@Component(
    selector: 'shift-app',
    directives: [ROUTER_DIRECTIVES],
    template: `<div>
                 <nav>
                     <h3> Navigation: </h3>
                     <ul>
                         <li><a [routerLink]="['Calendar']" > Home </a></li>
                         <li><a [routerLink]="['Admin']" > About </a></li>
                         <li><a [routerLink]="['Shifts']" > Contact us </a></li>
                     </ul>
                 </nav>            
                 <router-outlet></router-outlet>
             </div>`
)
@RouteConfig([
     path: '/', name: 'root', redirectTo: ['/Calendar'] ,
     path: '/calendar', name: 'Calendar', component: ShiftCalendarComponent ,
     path: '/admin', name: 'Admin', component: ShiftAdminComponent ,
     path: '/shifts', name: 'Shifts', component: ShiftListComponent 
])
export class ShiftApp   

//BOOTSTRAP   ******************************
    bootstrap(ShiftApp, [
        ROUTER_PROVIDERS, 
        provide(LocationStrategy,  useClass: HashLocationStrategy ),
        provide(APP_BASE_HREF,  useValue: '/' )    
    ]);

加载 Angular 应用程序并显示模板，但没有链接有效，我在控制台中收到以下错误：

例外：没有路由器提供程序！ (RouterLink -> 路由器) angular2.dev.js

在我的 index.html（我称之为 view.html）中，我已链接到所有相关库并包含 router.dev.js，并且我控制台的源选项卡向我显示所有所需脚本已成功加载。

我已经阅读了有关 Angular2 和整个路由器文档的路由器链接错误的每个堆栈溢出问题，但找不到我的不工作的原因。据我所知，我的代码匹配 the Angular2 Documentation

This documentation 表明 ROUTER_DIRECTIVES 包含 RouterOutlet 和 RouterLink 等指令

问题？

如果我成功地将组件的指令设置为 ROUTER_DIRECTIVES，为什么会收到“No provider for Router！RouterLink”错误？

【问题讨论】：

应用程序中一定有其他内容不在帖子中，我重新创建了您提供的代码，它适用于我。你可以从这里下载我的代码，也许你发现了它的不同之处：drive.google.com/file/d/0Bwb6Bsfrx94pX0RzdXl0VlNmdWM/…

谢谢，我现在看看

@SzabolcsDézsi - 老兄！数字高五 - 我移动了我的代码以匹配您的代码并且它有效。我将引导应用到子组件而不是主根组件。如果您使用 boot.ts 文件中的代码发布答案，我会接受。再次感谢！

我很高兴它得到了整理。

【参考方案1】：

将您的引导过程移到单独的文件中：

import bootstrap from 'angular2/platform/browser';
import provide, Component from 'angular2/core';
import ShiftApp from './app.component';

import 
    APP_BASE_HREF,
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    HashLocationStrategy,
    LocationStrategy
 from 'angular2/router';

bootstrap(ShiftApp, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy,  useClass: HashLocationStrategy ),
    provide(APP_BASE_HREF,  useValue: '/' )
]);

在 index.html 中导入该新文件：

System.config(
    packages: 
        app: 
            format: 'register',
            defaultExtension: 'js'
        
    
);
System.import('app/boot')
    .then(null, console.error.bind(console));

这样做的好处可以在here找到。

正如评论中提到的，引导您的根组件而不是子组件。

【参考方案2】：

解决方案是注入 boot.ts (bootloader 文件)

import bootstrap from 'angular2/platform/browser'
import AppComponent from './app.component'
import ROUTER_PROVIDERS from 'angular2/router';

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

这解决了我的问题。

【参考方案3】：

我遇到问题“例外：没有路由器提供程序！（RouterLink -> 路由器）”，我通过在 boot.ts 中进行更改成功地完全修复了它，根据下面的代码配置你的 boot.ts，它会工作很好。

import provide from 'angular2/core';
import bootstrap    from 'angular2/platform/browser';
import ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy from 'angular2/router';
import HTTP_PROVIDERS from 'angular2/http';
import AppComponent from './app.component';


bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy,  useClass: HashLocationStrategy ),
  HTTP_PROVIDERS
]);