Angular 2 Tutorial, unhandled promise rejection on routing section

Question

I am attempting to follow the official tutorial. Everything went well until the Routing section here. 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:

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

I ensured that it wasn't a mistake I may have made previously in the tutorial by copy pasting relevant files from here. The project works exactly as shown on the plunker.

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?

Code excerpts:

From app.component.ts

import { Component, OnInit } from '@angular/core';

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

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

...

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

constructor(private heroService: HeroService) { }

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

ngOnInit() {
  this.getHeroes();
}

onSelect(hero: Hero) { this.selectedHero = hero; }
}

From app.component.ts

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

from app.module.ts

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 {
}

from hero-detail.component.ts

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

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

EDITED to fix plunkr link

Answer 1

I got the same error following the tutorial. They might missed a little change in the app.module.ts. The HeroDetailComponent has not been imported and added to the declaration array. Hence the property hero of this component is unknown.

Adding the import as well as the respective declaration should fix this problem:

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 { HeroDetailComponent } from './hero-detail.component';

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

@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        AppComponent,
        HeroesComponent,
        HeroDetailComponent
    ],
    providers: [
        HeroService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

I assume they forgot to document that change. If you take a look into the next chapter (https://angular.io/docs/ts/latest/tutorial/toh-pt6.html) you will find this change in the app.module.js file.

Answer 2

If you read down a couple paragraphs(more like 30 paragraphs), you'll see

Delete the last line of the template with the <my-hero-detail> tags.

This will stop that error

I am going through the tutorial now and was actually searching for the answer haha