[英]Angular 2 routing app-routing module declaration error
I'm learning Angular 2 from official tutorial https://angular.io/docs/ts/latest/tutorial/toh-pt5.html . 我正在从官方教程https://angular.io/docs/ts/latest/tutorial/toh-pt5.html学习Angular 2。 And I have some problem with routing.
我在路由方面遇到了一些问题。 error message: Type DashboardComponent is part of the declarations of 2 modules: AppRoutingModule and AppModule!
错误消息:类型DashboardComponent是2个模块的声明的一部分:AppRoutingModule和AppModule! I don't know where is my mistake, I think I have everything same as in tutorial.
我不知道我的错误在哪里,我想我和教程中的一切都一样。
Error message: 错误信息:
My code: 我的代码:
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 { }
App-routing Module 应用路由模块
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 {}
App Component 应用组件
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'
}
Dashboard Component 仪表板组件
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);
}
}
Thank you for you help 谢谢你的帮助
I faced the exactly same problem and the root cause is that the code and angular module version are NOT match. 我遇到了完全相同的问题,根本原因是代码和角度模块版本不匹配。 My angular module was RC5 version but I use the commercial sample code.
我的角度模块是RC5版本,但我使用商业示例代码。 So I just updated the angular version and everything is OK.
所以我刚刚更新了角度版本,一切都还可以。
I had a similar bug halfway through the "Routing" section of the tutorial which ended up being caused by a missing parenthesis, not importing DashboardComponent. 我在本教程的“路由”部分中间有一个类似的错误,最终由缺少的括号引起,而不是导入DashboardComponent。 Might have been just a "me" mistake, although you are never instructed to add that import statement in the tutorial so it's not inconceivable that someone else would also have this issue.
可能只是一个“我”的错误,虽然你从未被指示在教程中添加import语句,所以其他人也会遇到这个问题并不是不可思议的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.