我没有使用 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]);

异常

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in http://localhost:4200/app/app.component.html:1:2 ORIGINAL EXCEPTION: No provider for RouterOutletMap! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:4200/vendor/@angular/core/src/facade/exceptions.js:27:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:43:16) at new NoProviderError (http://localhost:4200/vendor/@angular/core/src/di/reflective_exceptions.js:80:16) at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:786:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:814:25) at ReflectiveInjector_._getByKey (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:777:25) at ReflectiveInjector_.get (http://localhost:4200/vendor/@angular/core/src/di/reflective_injector.js:586:21) at ElementInjector.get (http://localhost:4200/vendor/@angular/core/src/linker/element_injector.js:30:48) at DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:27:70) at DebugAppView.AppView.create (http://localhost:4200/vendor/@angular/core/src/linker/view.js:96:21) ERROR CONTEXT: [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