Блог

Я изучаю Angular 2 из официального руководства https://angular.io/docs/ts/latest/tutorial/toh-pt5.html . И у меня есть некоторые проблемы с маршрутизацией. сообщение об ошибке: Тип DashboardComponent является частью объявлений 2 модулей: AppRoutingModule и AppModule! Я не знаю, в чем моя ошибка, я думаю, что у меня все так же, как в учебнике.

Сообщение об ошибке:

Мой код:

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 НЕ совпадают. У моего модуля angular была версия RC5, но я использую коммерческий образец кода. Итак, я только что обновил версию angular, и все в порядке.

У меня была аналогичная ошибка на полпути в разделе «Маршрутизация» руководства, которая в конечном итоге была вызвана отсутствующей круглой скобкой, а не импортом DashboardComponent . Возможно, это была просто ошибка «я», хотя вам никогда не указывалось добавлять этот оператор импорта в учебное пособие, поэтому не исключено, что у кого-то еще также возникнет эта проблема.