Angular2 Route Example with 2.0.0.-rc.1 version

@angular/router is 2.0.0.-rc.1

Looks like angular2 team is changing how to setup router very often, so following example might be out of date in the future, so following are files from my package.json.

  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "^0.6.12"
  },

Now, I'm use angular-cli to generate my angular2 project, you can type following command to generate route for you.

ng generate route hero

Following code are my working version.

import { Component } from '@angular/core';
import { HeroComponent } from './+hero';
import { Routes , ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router, RouterOutletMap} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'news-app2-app',
  templateUrl: 'news-app2.component.html',
  styleUrls: ['news-app2.component.css'],
  directives:[ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})
@Routes([
  {path: '/hero', component: HeroComponent}
])
export class NewsApp2AppComponent {
  title = 'news-app2 works!';
  constructor(private router: Router) {} 
}

<h1>
  {{title}}
</h1>

<router-outlet></router-outlet>