TypeScript - Angular 4 サンプルチュートリアル TypeScript エラー

私はAngularのウェブサイトで提供されているチュートリアルを試しています。行き詰まってしまい、問題を解決することができません。

私はAngular CLIを使ってプロジェクトを作成しました。

app.component.ts

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



const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];


@Component({
  selector: 'app-my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  selectedHero: Hero;
  heroes = HEROES;
  onSelect(hero: Hero): void {
  this.selectedHero = hero;
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import {HeroDetailComponent} from './hero-detail.component';

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

ヒーロー詳細.component.ts

import {Component, Input} from '@angular/core';
import {Hero} from './hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {
@Input() hero: Hero;
}

hero.ts

export class Hero {
id: number;
name: string;
}

ソース構造:

アプリを起動する際に以下のTSエラーが発生します

コンパイルに失敗しました。

/Users/name/Documents/workspaces/angular-tutorial1/firstapp/src/app/hero-detail.component.ts（3,12）：型'{ selector: number; templateUrl: string; }'の引数は型'Component'のパラメーターに割り当てられません。プロパティ'selector'の型が互換性がありません。型'number'は型'string'に割り当てられません。

回答 #1

app-component.html に次のような行がありますか？

<app-hero-detail [hero]="selectedHero"></app-hero-detail>