Application Routing überschreibt Module Routing

Question

Ich habe einige interessante Situation während der Entwicklung von Anwendung mit Angular 4.1.1 getroffen. Ich habe immer Routing in einem Modul erklärt und ich mache es in alle Module.

Zum Beispiel 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 { } 

Dann habe ich gelesen, diese article zu umleiten zu Komponente "404 Not Found", wenn Benutzereingaben nicht URL-Adresse exisiting. Und ich erklärte, diesen Weg in app-routing.module.ts:

export const routes: Routes = [ 
    { path: '**', component: PageNotFoundComponent } 
]; 

und jetzt alle Seiten zeigen Page not found.

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

Meine Fragen ist Ist es möglich, { path: '**', component: PageNotFoundComponent } nur an einem Ort zu schreiben, nicht in allen Komponenten?

Answer 1

Das Hauptproblem hier ist die Reihenfolge Ihrer Routen.

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

Siehe auch

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