アプリケーションルーティングがモジュールルーティングをオーバーライドする

Question

Angular 4.1.1を使用してアプリケーションを開発しているときに、私はいくつかの興味深い状況に出会った。私はいつもモジュールでルーティングを宣言しており、すべてのモジュールでそれを行います。例えば

、new-cars.routing.module.ts：

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { NewCarsComponent} from './new-cars.component'; 
import { NewCarsResolver } from './new-cars.resolver';  

@NgModule({ 
    imports: [ 
     RouterModule.forChild([ 
      { 
       path: 'cars/:id', 
       component: NewCarsComponent, 
       resolve: { 
        card: NewCarsResolver 
       } 
      } 
     ]) 
    ], 
    exports: [RouterModule] 
}) 

export class NewCarsRoutingModule { } 

それから私は、ユーザーの入力はURLアドレスをexisitingない場合は、 "404見つかりません" コンポーネントにリダイレクトするように、このarticleを読みました。

​​

を、今、すべてのページがPage not foundを示しています。そして、私はapp-routing.module.tsでこのルートを宣言しました。

app.module.ts：

import ...; 
import { NewCarsModule } from './new-cars/new-cars.module';  
import ...;  

@NgModule({ 
    imports: [ 
     RouterModule, 
     BrowserModule, 
     AppRoutingModule, 
     HomeModule, 
     SearchModule, 
     CoreModule,    
     NewsCarsModule, 
    ], 
    declarations: [ 
     AppComponent, 
     PageNotFoundComponent 
     ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

私の質問はそれがないすべてのコンポーネントには、ただ一つの場所に{ path: '**', component: PageNotFoundComponent }を書くことは可能ですか？

Answer 1

ここでの主な問題は、ルートの順序です。

@NgModule({ 
    imports: [ 
    ... 
    NewsCarsModule, // this order is important 
    AppRoutingModule // where you declared PageNotFoundComponent 
    ], 
    ... 
}) 
export class AppModule {} 

は、ルータのモジュールが間違った順序でインポートされた場合、これは一般的に起こる

• https://github.com/angular/angular/issues/12648