Angular2のルートを理解しようとしています。 Thisは、そのための大胆なリンクです。 \heroes
または\hero\:id
ルートが見つかりませんでした。これはheroes-routing-module
で作成されました。ホームページ(ヒーロー)が読み込まれるたびに、page not found
というテキストが表示され、ページが見つからないページ{ path: '**', PageNotFoundComponent}
が表示されます。以下は、関連ファイルの抜粋(インポートとエクスポートの行を持つ完全なコードではありません)です。Angular2がフィーチャモジュールルートを見つけることができません
英雄ルーティングモジュール
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を使用しています。 その他の情報が必要な場合は、ご意見ください。輸入品の
imports: [
BrowserModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
HeroesModule,
AppRoutingModule,
SharedModule
]
注文は、それがに来る問題:
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
を使用する:あなたのapp.module輸入は、このようにしているためである
* Appモジュール*で 'imports'に' RouterModule'を追加して上にインポートしようとしています –