Typescript Angular 2英雄之旅项目在拆分appcomponent后不工作

我一直在按照教程学习Angular 2，在我不得不将appcomponent拆分为heroescomponent和appcomponent之前，一切都很顺利

这里有没有人有同样的问题或者能看到问题

app.component.ts

import { Component }       from 'angular2/core';
import { HeroService }     from './hero.service';
import { HeroesComponent } from './heroes.component';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from "./hero-detail.component";

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <nav
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>

        <router-outlet></router-outlet>
      `,

    styleUrls: ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})

@RouteConfig([
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    },
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    }
])

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

import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {Router} from 'angular2/router';

@Component({
    selector: 'my-heroes',
    templateUrl: 'app/heroes.component.html',
    styleUrls: ['app/heroes.component.css'],
    directives: [HeroDetailComponent]
})

export class HeroesComponent implements OnInit{
    heroes: Hero[];
    selectedHero: Hero;

    constructor(
        private _heroService: HeroService,
        private _router: Router
    ) {}

    ngOnInit() {
        this.getHeroes();
    }

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

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

    gotoDetail() {
        this._router.navigate(['HeroDetail', { id: this.selectedHero.id}]);
    }
}

梅因酒店

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component.ts'

bootstrap(AppComponent);

---

您缺少导航开始标签中的结束“>”

应该是

        <nav>
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>

不知道您是否仍然存在问题，但我在同一步骤中遇到了相同的行为

几分钟后，由于AppComponent（更改为HeroesComponent）上的代码重构，搜索我的组件未加载的原因后，它在main.ts中将其重命名

重构做到了：

import {bootstrap} from "@angular/platform-browser-dynamic";
import {HeroesComponent} from "./heroes.component";

bootstrap(HeroesComponent);

您可以看到您的组件没有引用正确的组件

我把它改成了

import {bootstrap} from "@angular/platform-browser-dynamic";
import {AppComponent} from "./app.component";

bootstrap(AppComponent);

等等，应用程序正在重新加载

我希望它能对您有所帮助。
我也失去了与之前在路由章节中表现良好的教程《英雄之旅》应用程序的联系。我以前的问题已经通过查看http响应代码解决了，但它是304s和200s

有没有比检查我所有的元素是否有闭合的尖括号更好的方法来解决这个问题？它似乎非常乐意为我呈现一个白色矩形，左上角写着“在这里加载AppComponent内容…”。某个地方有日志可以告诉我发生了什么吗？
控制台上有错误吗？你能发布一个plnkr吗？哇，根本没看到，谢谢！但是这个项目仍然没有显示网站。我用你的代码做了一个plunker。它似乎正在工作，错误可能在另一个文件上。这是客户端代码！错误显示在Chrome调试器（F12）中。起初我没有想到这一点，因为页面源代码只是“/”，但Chrome调试器工作得很好。
import {bootstrap} from "@angular/platform-browser-dynamic";
import {AppComponent} from "./app.component";

bootstrap(AppComponent);