Angular2找不到要素模块路由

Question

我想了解Angular2中的路线. 这是它的plunker链接.我的问题是它无法找到\heroes或\hero\:id创建的路由heroes-routing-module.每次加载主页(\ heroes)时,它都会显示page not found来自页面未找到页面的文本{ path: '**', PageNotFoundComponent}.以下是相关文件的摘录(不是包含导入和导出行的完整代码).

英雄路由模块

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroesComponent },
  { path: 'hero/:id', component: HeroDetailComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})

英雄模块

@NgModule({
  imports: [
    HeroRoutingModule,
    SharedModule
  ],
  declarations: [
    HeroesComponent,
    HeroDetailComponent,
    HeroSearchComponent
  ],
  providers: [
    HeroService
  ]
})

应用模块

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule,
    HeroesModule,
    SharedModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    CrisisListComponent,
    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})

应用路线

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent }   from './dashboard.component';
import { CrisisListComponent }  from './crisis/crisis-list.component';
import { PageNotFoundComponent } from './not-found.component';

const routes: Routes = [
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'crisis-center', component: CrisisListComponent },
  { path: '', redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

我已经检查了输入中的所有文件名是否错字,所以我不在此处添加.控制台没有错误,我使用的是Angular 2.1.如果需要任何其他信息,请评论.

Answer 1

那是因为你的app.module导入是这样的:

  imports: [
    BrowserModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule, //<-- after this it won't be finding the routes below because of the wildcard route
    HeroesModule,
    SharedModule
  ]

所以使用AppRoutingModule最后的路由模块:

  imports: [
    BrowserModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    HeroesModule,
    AppRoutingModule,
    SharedModule
  ]

在路由方面,进口顺序很重要,angular2路由系统从上到下.