javascript - 应用程序路由优先于模块路由

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

然后我读了这个article如果用户输入不存在的 URL 地址，则重定向到“404 Not Found”组件。我在 app-routing.module.ts 中声明了这条路由:

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

现在所有页面都显示找不到页面。

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