Angular 2 Tutorial, unhandled promise rejection on routing section
<p>I am attempting to follow the official tutorial. Everything went well until the Routing section <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt5.html">here</a>.  When I reach the section where we remake app.component.ts and change the app.module.ts, I get a loading screen on localhost, console error is:</p>

<blockquote>
  <p>Unhandled Promise rejection: Template parse errors:
  Can't bind to 'hero' since it isn't a known property of 'my-hero-detail'.</p>
</blockquote>

<p>I ensured that it wasn't a mistake I may have made previously in the tutorial by copy pasting relevant files from <a href="https://angular.io/resources/live-examples/toh-4/ts/plnkr.html">here</a>.  The project works exactly as shown on the plunker.</p>

<p>My question is what is causing the promise to fail when it works in earlier versions, and where can I learn how to fix it?</p>

<p>Code excerpts:</p>

<p>From app.component.ts</p>

<pre><code>import { Component, OnInit } from '@angular/core';

import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
selector: 'my-heroes',
template: `
&lt;h1&gt;{{title}}&lt;/h1&gt;
&lt;h2&gt;My Heroes&lt;/h2&gt;
&lt;ul class="heroes"&gt;
  &lt;li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)"&gt;
    &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
  &lt;/li&gt;
&lt;/ul&gt;
&lt;my-hero-detail [hero]="selectedHero"&gt;&lt;/my-hero-detail&gt;
`,
</code></pre>

<p>... </p>

<pre><code>export class HeroesComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;

constructor(private heroService: HeroService) { }

getHeroes() {
this.heroService.getHeroes().then(heroes =&gt; this.heroes = heroes);
}

ngOnInit() {
  this.getHeroes();
}

onSelect(hero: Hero) { this.selectedHero = hero; }
}
</code></pre>

<p>From app.component.ts</p>

<pre><code>import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    &lt;h1&gt;{{title}}&lt;/h1&gt;
    &lt;my-heroes&gt;&lt;/my-heroes&gt;
  `
})
export class AppComponent {
  title = 'Tour of Heroes';
}
</code></pre>

<p>from app.module.ts</p>

<pre><code>import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }   from './app.component';
import { HeroesComponent }  from './heroes.component';
import { HeroService }  from './hero.service';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
</code></pre>

<p>from hero-detail.component.ts</p>

<pre><code>import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'my-hero-detail',
  template: `
    &lt;div *ngIf="hero"&gt;
      &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
      &lt;div&gt;
        &lt;label&gt;id: &lt;/label&gt;{{hero.id}}
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label&gt;name: &lt;/label&gt;
        &lt;input [(ngModel)]="hero.name" placeholder="name"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  `
})
export class HeroDetailComponent {
  @Input() hero: Hero;
}
</code></pre>

<p>EDITED to fix plunkr link</p>