Angular 2 No provider for RouterOutletMap in Plunker

Question

I need help on setting up Angular 2 routing in Plunker. Keep getting No provider for RouterOutletMap error.

Plunker: 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

You are mixin RC4 and RC5 .. take care!

Check the documentation here: https://angular.io/docs/ts/latest/guide/router.html

Theres also a working 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! ;)