ReferenceError: DashboardComponent is not defined

ReferenceError: DashboardComponent is not defined

我在学习 Angular2 教程时遇到此错误。我已经检查了所有内容,但没有发现错误。下面是我的代码

app.component.ts

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';


@Component({
    selector:"my-app",
    template:`
        <h1>{{title}}</h1>
        <nav>           
            <a [routerLink]="['Heroes']">Heroes</a>         
        </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers:[
        ROUTER_PROVIDERS,
        HeroService
    ]
})

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

export class AppComponent { 
    title = "My Heroes App";
}

dasboard.component.ts 从“@angular/core”导入{组件};

@Component({
    selector: 'my-home',
    template: '<h3>My Dashboard</h3>'
})
export class DashboardComponent {}

当我从 @RouteConfig

中删除以下代码块时,一切正常
{
    path: '/dashboard',
    name: 'Dashboard',
    component:DashboardComponent,
    useAsDefault:true
},

您还需要导入 DashboardComponent 组件:

import { DashboardComponent } from './dashboard.component';

我只看到 HeroesComponent 一个进口的...

我运行进入了与"Tour of Heroes"教程相同的错误信息。教程说

Also import and add DashboardComponent to our root NgModule's declarations.

好的,我知道如何导入组件了:

import { DashboardComponent } from './dashboard.component';

但是需要导入到哪里呢?上面的答案是将其导入 app.component.ts。恕我直言,这是不正确的。导入 app.component.ts 的唯一模块是

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

相反,DashboardComponent 需要导入到两个文件中:app.module.tsapp.routing.ts