我没有使用 angular-cli: 1.0.0-beta.10 获得 RouterOutletMap 的提供者

Question

我对如何使用 @angular/router 3.0.0-beta.2 为 angular-cli: 1.0.0-beta.10 实现路由感到困惑。我收到一个错误没有 RouterOutletMap 的提供者，非常感谢任何帮助。

我的代码是：

app/app.component.html

<div id="wrapper" class="container-fluid">
  <router-outlet></router-outlet>
</div>

app/app.component.ts

import { Component } from '@angular/core';
import { RegistrationComponent } from './registration/registration.component';
import { WelcomeComponent } from './home/welcome.component';
import { HTTP_PROVIDERS } from '@angular/http';
import { Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';
import { appRoutingProviders } from './app.routes';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [RegistrationComponent, WelcomeComponent, ROUTER_DIRECTIVES],
  providers: [HTTP_PROVIDERS, appRoutingProviders]
})

export class AppComponent {

}

app/app.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './home/welcome.component';
import { RegistrationComponent } from './registration/registration.component'

 const appRoutes: Routes = [
   { path: '', redirectTo: '/welcome', pathMatch: 'full' },
   { path: 'welcome', component: WelcomeComponent },
   { path: 'registration', component: RegistrationComponent }
 ]

 export const appRoutingProviders: any[] = [

 ];

 export const routing = RouterModule.forRoot(appRoutes);

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent, environment } from './app/';
import { appRoutingProviders } from './app/app.routes';


if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [HTTP_PROVIDERS, appRoutingProviders]);

例外

异常：错误：未捕获（承诺中）：异常：错误 http://localhost:4200/app/app.component.html:1:2 原始异常： RouterOutletMap 没有提供者！原始堆栈跟踪：错误：DI 例外 在 NoProviderError.BaseException [作为构造函数] (http://localhost:4200/vendor/@angular/core/src/facade/exceptions.js:27:23) 在 NoProviderError.AbstractProviderError [作为构造函数] (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:43:16) 在新的 NoProviderError (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:80:16) 在 ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:786:19) 在 ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:814:25) 在 ReflectiveInjector_._getByKey (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:777:25) 在 ReflectiveInjector_.get (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:586:21) 在 ElementInjector.get (http://localhost:4200/vendor/@angular/core/src/linker/element_injector.js:30:48) 在 DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:27:70) 在 DebugAppView.AppView.create (http://localhost:4200/vendor/@angular/core/src/linker/view.js:96:21) 错误上下文：[object Object]

Answer 1

我不知道这个路由器版本是否应该适用于 RC.5 之前的 Angular2 版本

在 RC.5 中看起来像

@NgModule({
  imports:      [ routing ],
  ...
  providers:    [ appRoutingProviders ],
})

更多详情见

• https://angular.io/docs/ts/latest/guide/ngmodule.html
• https://angular.io/docs/ts/latest/guide/router.html
• https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html