Angular 2 Tour of Heroes Typescript beim Laden fest

Question

Meine Angular 2 Tour von Heroes Anwendung ist auf "Loading ..." stecken und angular-cli meldet keine Fehler, ich bin im fünften Teil des Tutorials und ich habe keine Ahnung was das Problem ist. Hier sind meine Dateien, die ich für am wichtigsten halte. Ich hoffe, du kannst das Problem sehen! Edit: Es gibt einen Fehler in der Konsole: Uncaught Typeerror: kann Eigenschaft 'Stack' Satz von undefinierten

Helden 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

fixiert ich das Problem mit nur

Ändern

selector: 'my-app' 

mit

selector: 'app-root' 

in app.component.ts Datei. Am Anfang des Tutorials wird vorgeschlagen, das Projekt von einem Git Repo zu starten, aber ich habe es mit angular cli von cmd erzeugt. Ich denke, das ist die Ursache.