如何在Angular中声明全局捕获（NotFound）路由？

要实现全局的未找到页面捕获，关键是利用Angular路由的顺序匹配规则——路由会从上到下依次匹配，只有当前面所有路由都无法匹配时，才会触发最后面的通配符路由。下面是具体的实现步骤：

1. 准备NotFound组件 #

首先你需要一个用于展示404页面的组件，如果还没有，可以用Angular CLI快速生成：

ng generate component not-found

2. 修改主路由模块 #

打开你的app.routing.module.ts，在路由数组的最末尾添加通配符路由（用**表示匹配所有未被匹配的路径），同时别忘了导入对应的组件：

// 导入NotFound组件
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // 全局NotFound路由，必须放在最后！
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes), ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

3. 子路由的兼容说明 #

你提到还有子路由模块，比如包含AbcRoute1、AbcRoute2的模块，不用担心全局路由会干扰子路由的匹配：

• 当用户访问子路由下的路径时，Angular会优先匹配子路由模块内的路由规则；
• 如果子路由里没有对应的匹配项，才会回到主路由继续匹配，最终触发全局的NotFound路由。

如果需要给某个子路由模块单独设置专属的404页面，也可以在该子路由数组的最后添加{ path: '**', component: XxxModuleNotFoundComponent }，这样该模块下的未知路径会优先使用子模块的404页面，而不是全局的。

内容的提问来源于stack exchange，提问作者lahsrah