Angular 2 Tour of Heroes手写体卡在加载

Question

我的Angular 2 Tour of Heroes应用程序停留在“Loading ...”上，而angular-cli没有报告任何错误，我在教程的第五部分，不知道问题是什么。这是我认为最重要的文件。我希望你能看到问题！ 编辑：有一个在控制台一个错误：未捕获的类型错误：无法设置未定义

英雄detail.component.ts的特性 '栈'

import 'rxjs/add/operator/switchMap'; 
import { Component, Input, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location }     from '@angular/common'; 

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

@Component({ 
    moduleId: module.id, 
    selector: 'my-hero-detail', 
    templateUrl: 'hero-detail.component.html', 
}) 

export class HeroDetailComponent implements OnInit { 
    @Input() hero: Hero; 

    constructor(
    private heroService: HeroService, 
    private route: ActivatedRoute, 
    private location: Location 
) { 

    } 

    ngOnInit(): void { 
    this.route.params 
     .switchMap((params: Params) => this.heroService.getHero(+params['id'])) 
     .subscribe(hero => this.hero = hero); 
    } 

    goBack(): void { 
    this.location.back(); 
    } 
} 

heroes.component.ts

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

@Component({ 
    selector: 'my-heroes', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    template:` 
    <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 { 
    selectedHero: Hero; 
    heroes: Hero[]; 

    constructor(private heroService: HeroService) { 

    } 

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

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

    ngOnInit(): void { 
    this.getHeroes(); 
    } 
} 

app.module.ts

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

import { AppComponent } from './app.component'; 
import { HeroDetailComponent } from './hero-detail.component'; 
import { HeroesComponent } from './heroes.component'; 
import { HeroService } from './hero.service'; 
import { DashboardComponent } from './dashboard.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeroDetailComponent, 
    HeroesComponent, 
    DashboardComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule.forRoot([ 
     { 
     path: 'heroes', 
     component: HeroesComponent 
     }, 
     { 
     path: 'dashboard', 
     component: DashboardComponent 
     }, 
     { 
     path: '', 
     redirectTo: '/dashboard', 
     pathMatch: 'full' 
     }, 
     { 
     path: 'detail/:id', 
     component: HeroDetailComponent 
     } 
    ]) 
    ], 
    providers: [ 
    HeroService 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 

} 

app.component.ts

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

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <nav> 
    <a routerLink="/dashboard">Dashboard</a> 
    <a routerLink="/heroes">Heroes</a> 
    </nav> 
    <a routerLink="/heroes">Heroes</a> 
    <router-outlet></router-outlet> 
` 
}) 

export class AppComponent { 
    title = 'Tour of Heroes' 
} 

hero.service.ts

import { Injectable } from '@angular/core'; 

import { Hero } from './hero'; 
import { HEROES } from './mock-heroes'; 

@Injectable() 
export class HeroService { 
    getHeroes(): Promise<Hero[]> { 
    return Promise.resolve(HEROES); 
    } 

    getHero(id: number): Promise<Hero> { 
    return this.getHeroes() 
     .then(heroes => heroes.find(hero => hero.id === id)); 
    } 
} 

dashboard.component.ts

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

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


@Component({ 
    moduleId: module.id, 
    selector: 'my-dashboard', 
    templateUrl: 'dashboard.component.html', 
}) 

export class DashboardComponent implements OnInit { 
    heroes: Hero[] = []; 

    constructor(private heroService: HeroService) { 

    } 

    ngOnInit(): void { 
    this.heroService.getHeroes() 
     .then(heroes => this.heroes = heroes.slice(1, 5)); 
    } 
} 

Answer 1

我只是改变

selector: 'my-app' 

与

selector: 'app-root' 

在app.component.ts文件解决了这一问题。在教程开始时，建议从git repo开始项目，但是我使用cmd中的角度cli生成它。我认为这是原因。