Javascript 应用程序路由覆盖模块路由

在使用

Angular 4.1.1

开发应用程序时，我遇到了一些有趣的情况。我总是在一个模块中声明路由，我在所有模块中声明路由

例如，

新车.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 { }

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

然后我读了这篇文章，如果用户输入的URL地址不存在，就重定向到“404NotFound”组件。我在

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

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}

，而不是在所有组件中编写？

这里的主要问题是路由的顺序

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

另见

---

这里的主要问题是路线的顺序

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

另见
---

---

如果您的路由器模块以错误的顺序导入，通常会发生这种情况；导入所有其他路由后，您的通配符（404）路由需要是路由列表中的最后一个路由。@Claies我不在

常量批准中声明路由：routes=[…]

，但我在模块中声明路由。因此，应用程序路由覆盖模块路由。它看起来像是

Angular

查看

app routing.module.ts

文件进行路由，然后移动到模块所在的位置，例如，

新车。routing.module.ts

。您可以添加AppModule吗？@yurzui我已经添加了

app.module.ts

RouterModule

在您的

AppModule

中是多余的。您可以将其添加到

AppRoutingModule

如果您的路由器模块以错误的顺序导入，通常会发生这种情况；导入所有其他路由后，您的通配符（404）路由需要是路由列表中的最后一个路由。@Claies我不在

常量批准中声明路由：routes=[…]

，但我在模块中声明路由。因此，应用程序路由覆盖模块路由。它看起来像是

Angular

查看

app routing.module.ts

文件进行路由，然后移动到模块所在的位置，例如，

新车。routing.module.ts

。您可以添加AppModule吗？@yurzui我已经添加了

app.module.ts

RouterModule

在您的

AppModule

中是多余的。您可以将其添加到

ApprovingModule

中，这样我就不需要

app.module.ts的
@NgModule
中的
声明了。我现在遇到了一个奇怪的错误：
未处理的承诺拒绝：组件PageNotFoundComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中；区域：；任务：承诺；值：错误：组件PageNotFoundComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中。
您是否将其添加到声明数组中？您太神奇了！：）但为什么要将
PageNotFoundComponent
添加到声明数组中？我认为
PageNotFoundComponent
只是一个模块，任何组件都应该在某个模块中声明。这是设计的，所以我不需要在
app.module.ts
的
@NgModule
中声明
？我现在遇到了奇怪的错误：
未处理的承诺拒绝：组件PageNotFoundComponent不是任何NgModule的一部分，或者该模块未导入到您的模块中；区域：；任务：承诺；值：错误：组件PageNotFoundComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中。
您是否将其添加到声明数组中？您太神奇了！：）但为什么要将
PageNotFoundComponent
添加到声明数组中？我认为
PageNotFoundComponent
只是一个模块，任何组件都应该在某个模块中声明。这是设计的