Angular 2路由应用程序路由模块声明错误

我正在向官方学习Angular 2 辅导的我在路由方面有一些问题。错误消息：类型仪表板组件是两个模块声明的一部分：AppRoutingModule和AppModule！ 我不知道我的错误在哪里，我想我的一切都和教程一样

错误消息：

我的代码：

应用模块

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

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

import { AppRoutingModule }     from './app-routing.module';

@NgModule({
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,

  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

应用程序路由模块

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

应用程序组件

import {Component} from "@angular/core";
/**
 * Created by lukasfrajt on 13.10.16.
 */


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

import {Component} from "@angular/core";
import {Hero} from "./hero";
import {HeroService} from "./hero.service";
import {Router} from "@angular/router";


@Component({
  selector: 'my-dashboard',
  moduleId: module.id,
  templateUrl: `dashboard.component.html`
})
export class DashboardComponent {
    heroes: Hero[] = [];

  constructor(private heroService: HeroService , private  router: Router)
  {

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

  }
  gotoDetail(hero: Hero): void {
    let link = ['/detail', hero.id];
    this.router.navigate(link);
  }
}

---

感谢您的帮助

我遇到了完全相同的问题，根本原因是代码和角度模块版本不匹配。我的angular模块是RC5版本，但我使用的是商业示例代码。因此，我刚刚更新了angular版本，一切正常。

在教程的“布线”部分的中途，我遇到了类似的错误，结果是缺少括号，而不是导入仪表板组件。这可能只是一个“我”的错误，尽管教程中从未指示您添加该导入语句，因此其他人也会有此问题并非不可想象

你能发布你的文件夹结构、index.html和systemjs.config吗当然，如果你能帮助我@bean0341，我会非常感激。我能找到的只是一些小的语法细节，但我认为它们都不足以引起你的问题，我已将您的所有代码转移到一个plunkr中，它工作正常：/n但您应该更改的内容包括：在仪表板组件中，在调用选择器之前放置module.id。在应用程序组件中，在选择器之前添加'moduleId:module.id'。另外，在你的index.html中，将你的

base href

放在你的“我照你说的做了，但还是什么都没有”的开头。也许可以帮你解决这个问题，当我在重构之前重构教程的这一部分时，路由到一个路由模块一切正常，所以可能这里也有同样的错误，但我不知道。老实说，我知道这不是你想听到的，但为什么要制作路由模块？作为一个组件离开吧，哈哈，把这篇文章留给别人去理解：）非常感谢：）你是如何找到你正在使用的Angular版本的？我可以找到npm版本（4.2.0），但不是角度（除非我对npm的含义有一个根本性的误解，这当然可能是xD）