Angular2找不到要素模块路由

时间:2016-12-24 14:22:32

标签: angular angular2-routing

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

英雄路由模块

{ 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 ]
})

我已经检查了导入中的所有文件名以获取拼写错误,因此我不在此处添加。控制台没有错误,我使用的是Angular 2.1。 如果需要任何其他信息,请发表评论。

1 个答案:

答案 0 :(得分:8)

这是因为你的 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路由系统从上到下。