2016-12-24 21 views
2

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輸入は、このようにしているためである

+0

* Appモジュール*で 'imports'に' RouterModule'を追加して上にインポートしようとしています –

答えて

6

ルーティング、角度2ルーティングシステムは、上から下に向かっています。

関連する問題