获取 Angular2 错误“没有路由器提供程序！ (RouterOutlet -> 路由器)'

Question

我使用 Angular2 alpha39 和 Babel 来转译 ES6 JS 文件。我没有使用打字稿。

我创建了一个正确显示的组件。我在模板中添加了一个 router-outlet。当我运行应用程序时，我收到错误消息：

没有路由器供应商！ (RouterOutlet -> 路由器)

调用栈是：

这里是sn-p的代码：

模板：

.... // Removed for brevity
<div class="contenttext">
    <router-outlet></router-outlet>
</div>
.... // Removed for brevity

组件文件：

import { Component, View, bootstrap,  OnInit } from 'angular2/angular2';
import { RouteConfig, RouterOutlet, RouterLink } from 'angular2/router';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'dashboard-app'
})
@View({
    templateUrl: '../js/dashboard.html',
    directives: [ ContentComponent, FamiliesComponent, RouterOutlet, RouterLink ]
})
@RouteConfig([ 
    { path: '/employees', component: EmployeesComponent, as: 'employees'} 
]) 
class DashboardAppComponent implements OnInit {
    constructor() {
    }

    onInit() {
        WinJS.UI.processAll().done(function() {
            var splitView = document.querySelector(".splitView").winControl;
            new WinJS.UI._WinKeyboard(splitView.paneElement);
        })
    }
}

bootstrap(DashboardAppComponent);

Answer 1

你必须使用：

1. 引导程序中的 ROUTER_BINDINGS。
2. 在您的 index.html 中。
3. 如果可能，使用状态，即“员工”，将 i.r 大写为“员工”。 （在 alpha 42 中，我通过这种方式解决了一个问题）。

我希望这对你有帮助。

--更新--

在 alpha41 发布后：

1. ROUTER_BINDINGS 已更改为 ROUTER_PROVIDERS 。
2. 路由器别名应为驼峰式。
3. 对于 Router-outler 和 router-link，您只需在组件注释的指令属性中导入 ROUTER_DIRECTIVES。
4. Router-link 期望值是一个路由名称数组。了解更多信息。参考here。

有关路由的更多信息，您可以参考本教程here。

---更新2---

1. 现在（从 alpha-49 开始）路由器导出为 ng.router。

2. （根据 alpha-47 所有生命周期钩子重命名为。）

   onActivate、onReuse、onDeactivate、canReuse、canDeactivate

   收件人：--

   routerOnActivate,routerOnReuse,routerOnDeactivate,routerCanReuse,routerCanDeactivate

---更新3---

1. router-link改为routerLink

2. 并且 routeconfig 属性更改为：

   {path: '/abc', component: ABC, as: 'abc'} 到： {path: '/xyz' , component: XYZ, name: 'xyz'}

--更新4--

更新到 ANGULAR2 RC

在 RC 之后，angular2 中的路由发生了很多变化，其中一些我要在这里提到的点可能对某人有所帮助：-

1. angular2/router 已更改为 @angular/router （您也可以使用 @angular/router-deprecated 的导入来使用旧的路由功能，但现在我们必须使用 @angular/router）。

2. @RouteConfig 已更改为 @Routes 。

例如：-

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent}
])

Answer 2

2.0.0-alpha.36 (2015-08-31)

• routerInjectables 更名为ROUTER_BINDINGS

2.0.0-alpha.41 (2015-10-13)

• ROUTER_BINDINGS 更名为ROUTER_PROVIDERS

使用 ROUTER_PROVIDERS

ROUTER_PROVIDERS 用于简化路由器的引导。

它包括：

• RouterRegistry - 注册路由的集合
• LocationStrategy = PathLocationStrategy - 按路径匹配

ROUTER_PROVIDERS 提供 'sane' 默认值，除非您需要不同的路由 LocationStrategy，否则应该使用它。

变化：

bootstrap(DashboardAppComponent);

收件人：

bootstrap(DashboardAppComponent, [
  ROUTER_PROVIDERS
]);

来源：

• angular/commit/ccfadb9
• angular/pr#4654

---

2.0.0-alpha.38 (2015-10-03)

路由别名必须是 CamelCase（技术上是 PascalCase）

注意：Pardeep 在 #3 下的回答中已经提到了这一点

如果您想通过router-link 在模板中包含指向路由的链接，您必须确保该路由的别名（即name 属性）是PascalCase。

如果你使用计划使用router-link 修改路由到：

{ path: '/employees', component: EmployeesComponent, name: 'Employees'}

然后您可以在模板中添加链接：

<a [router-link]="['/Employees']">Employees Link</a>

RouterLink 动态插入与路由路径匹配的 href。

注意：阅读问题/公关，似乎做出此更改是为了防止用户将 <route-link> 绑定与路由 url 混淆

来源：

• https://groups.google.com/d/msg/angular/IF3_UCJt340/6AgSF76XAwAJ
• angular/issues#4318
• angular/pr#4643

提示：

如果您想简化视图指令，请使用 ROUTER_DIRECTIVES

它包括：

• RouterLink
• RouterOutlet

---

更新：

在不久的将来，RouterOutlet/<router-outlet> 将更名为RouterViewport/<router-viewport>

来源：

• angular/issues#4679

更新 2：

• RouteConfig 属性 as 已重命名为 name

来源：

• angular/commit/7d83959

Answer 3

确保您在 AppModule 中定义和声明了路由器。 示例（查看所有提到路由的地方，忽略其余部分）：

app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HeroesComponent }      from './heroes.component';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from './hero-detail.component';

const appRoutes: Routes = [
  {
    path: 'heroes',
    component: HeroesComponent
  },
  {
  path: 'dashboard',
  component: DashboardComponent
},
{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},
{
  path: 'detail/:id',
  component: HeroDetailComponent
},
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

和 app.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';


import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { routing }              from './app.routing';
import './rxjs-extensions';
import {HeroSearchComponent} from './hero-search.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    routing
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  providers: [
    HeroService,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Answer 4

2016 年 12 月 23 日回答（Angular v2.4.1，Router v3.4.1 - 应该适用于任何 NG v2.x.x + Router v3.x.x）

我刚刚将我们的三个应用从 Webpack Starter Seed 迁移到 Angular CLI (v1.0.0-beta.24) 并遇到了这个问题。

只需要 NG 2 massive router doc page 上的一小部分内容：

app-routing.module.ts 文件（通常在 src/app/ 文件夹中）类似于以下示例：

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: YourHomePageComponent },
  { path: 'next-page',   component: NextComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

将 AppRoutingModule 导入您的主模块（通常为 src/app/app.module.ts）：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule  // <--- The import you need to add
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

确保您在主 html（通常是 src/app/app.component.html）的某处有 <router-outlet></router-outlet>，因为这是注入路由器内容的地方。

Answer 5

这可以为某人节省一个小时：

如果您甚至不使用路由（例如临时，也许您不导入路由配置并且路由器出口被注释掉），您会收到此错误，但是您通过依赖注入在某些组件构造函数中使用 Router 或 ActivatedRoute ，像这样：

@Component({...}})
export class SomeComponent {
constructor(private _router: Router, private _route: ActivatedRoute) {
//may be you are not using _route/_route at the moment at all!
}
...
}

Answer 6

如果你没有定义任何路由，你就不能使用 Router 的依赖注入！ 定义路由用户类似于以下代码：

const loginRoutes: Routes = [
    {path: 'foo/bar/baz', component: 'MyRootComponent'}
];

@NgModule({
    imports:      [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        RouterModule.forRoot(loginRoutes)
    ],
    providers:    [],
    declarations: [
        MyLoginComponent
    ],
    bootstrap:    [
        MyLoginComponent
    ]
})

export class MyLoginModule
{
}