title: Angular 2 Tour of Heroes project not working after splitting appcomponent
body: <p>I've been following the tutorial to learn Angular 2, everything went well until I had to split up appcomponent into heroescomponent &amp; appcomponent.</p>
  
  <p>Anyone here that had the same problem or can see the problem?</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component }       from 'angular2/core';
  import { HeroService }     from './hero.service';
  import { HeroesComponent } from './heroes.component';
  import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
  import {DashboardComponent} from './dashboard.component';
  import {HeroDetailComponent} from "./hero-detail.component";
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;nav
              &lt;a [routerLink]="['Dashboard']"&gt;Dashboard&lt;/a&gt;
              &lt;a [routerLink]="['Heroes']"&gt;Heroes&lt;/a&gt;
          &lt;/nav&gt;
  
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
        `,
  
      styleUrls: ['app/app.component.css'],
      directives: [ROUTER_DIRECTIVES],
      providers: [
          ROUTER_PROVIDERS,
          HeroService
      ]
  })
  
  @RouteConfig([
      {
          path: '/heroes',
          name: 'Heroes',
          component: HeroesComponent
      },
      {
          path: '/dashboard',
          name: 'Dashboard',
          component: DashboardComponent,
          useAsDefault: true
      },
      {
          path: '/detail/:id',
          name: 'HeroDetail',
          component: HeroDetailComponent
      }
  ])
  
  export class AppComponent {
      title = 'Tour of Heroes';
  }
  </code></pre>
  
  <p>heroes.component.ts</p>
  
  <pre><code>import {Component, OnInit} from 'angular2/core';
  import {Hero} from './hero';
  import {HeroDetailComponent} from './hero-detail.component';
  import {HeroService} from './hero.service';
  import {Router} from 'angular2/router';
  
  @Component({
      selector: 'my-heroes',
      templateUrl: 'app/heroes.component.html',
      styleUrls: ['app/heroes.component.css'],
      directives: [HeroDetailComponent]
  })
  
  export class HeroesComponent implements OnInit{
      heroes: Hero[];
      selectedHero: Hero;
  
      constructor(
          private _heroService: HeroService,
          private _router: Router
      ) {}
  
      ngOnInit() {
          this.getHeroes();
      }
  
      getHeroes() {
          this._heroService.getHeroes().then(heroes =&gt; this.heroes = heroes);
      }
  
      onSelect(hero: Hero) {
          this.selectedHero = hero;
      }
  
      gotoDetail() {
          this._router.navigate(['HeroDetail', { id: this.selectedHero.id}]);
      }
  }
  </code></pre>
  
  <p>main.ts</p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser'
  import {AppComponent} from './app.component.ts'
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p><a href="https://angular.io/docs/ts/latest/tutorial/toh-pt5.html#!#splitting-the-appcomponent-" rel="nofollow">Tour of Heroes Part 5: Splitting the appcomponent</a></p>