Angular 2 Plunker 中没有 RouterOutletMap 的提供者

Question

我需要有关在 Plunker 中设置 Angular 2 路由的帮助。继续收到没有提供 RouterOutletMap 错误的信息。

笨蛋：https://plnkr.co/edit/ZfsaKj0r4mGztxbQ43UZ?p=preview

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
import { appRouterProviders }   from './app.routes';
platformBrowserDynamic().bootstrapModule(AppModule, [appRouterProviders])

app.ts

import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { ROUTER_DIRECTIVES } from '@angular/router';
//import { ROUTER_PROVIDERS, Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <div>
       <router-outlet></router-outlet>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES],
  //providers: [ROUTER_PROVIDERS]
})
export class App {
  constructor() {}
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

app.routes.ts

import { provideRouter, RouterConfig }  from '@angular/router';
import { TopicsComponent } from './topics.component';
import { PageNotFoundComponent } from './page-not-found.component';

const routes: RouterConfig = [

  {
    path: '',
    component: TopicsComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  },
];

export const appRouterProviders = [
  provideRouter(routes)
];

topics.component.ts

import { Component} from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
//import { ROUTER_PROVIDERS, Routes, ROUTER_DIRECTIVES, Router } from '@angular/router';

@Component({
  selector: 'topics',
  templateUrl: `
    <h1>{{title}}</h1>
    <div *ngFor="let topic of topics">
      <a [routerLink]="'/' + topic.title" routerLinkActive="active">{{ topic.title }}</a>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES],
  //providers: [ROUTER_PROVIDERS]
})

export class TopicsComponent { 
    title = 'Welcome to the topics component!';
    topics: [
        {title: 'angular2'}, 
        {title: 'react'}, 
        {title: 'angular1'}
    ];

}

Answer 1

您混入了 RC4 和 RC5 ..保重！

在此处查看文档：https://angular.io/docs/ts/latest/guide/router.html

还有一个工作的 plunker：http://plnkr.co/edit/nRoudQv5Y52wH8OBRALO?p=preview

// there's too much code to post here! :)
// this is just to fake some code.. ignore it! ;)

Answer 2

我假设您正在使用 RC5，如果是这样，您应该使用新的 RouterModule

参考文献：https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

Angular 2 Plunker 中没有 RouterOutletMap 的提供者

Angular 2 No provider for RouterOutletMap in Plunker

plunker

angular2-routing

angular