Angular模块化路由中'**'通配路由匹配失效问题咨询

为什么子模块中的**路由不生效 #

Angular的路由匹配遵循从根到子、按顺序匹配的规则：

• 根路由模块的路由会优先匹配，只有当URL命中某个子模块的父路由路径（比如{path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)}）时，才会加载对应子模块的路由并进行后续匹配。
• 如果URL完全不匹配任何根路由（包括子模块的父路径），根本不会进入子模块的路由匹配流程，所以子模块里的**路由永远不会被触发。

正确的模块化处理方案 #

1. 根路由处理全局404，组件模块化

全局不匹配的URL必须在根路由中用**捕获，但可以把404组件单独封装成模块，保持组件与路由逻辑的模块化：

• 先创建NotFoundModule，将NotFoundComponent放在独立的模块文件夹下：

// not-found/not-found.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NotFoundComponent } from './not-found.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [NotFoundComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([]) // 子模块路由留空，仅用于组件封装
  ],
  exports: [NotFoundComponent]
})
export class NotFoundModule { }

• 在根路由模块中导入NotFoundModule，并配置全局404路由：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  // 挂载子模块路由
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  // 全局404路由，必须放在最后
  { path: '**', component: NotFoundComponent }
];

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

这样既保持了组件的模块化（NotFoundComponent在独立文件夹），又能正确捕获所有不匹配的URL。

2. 子模块处理自身路径下的404

如果需要针对某个子模块的路径范围处理404（比如/admin下的无效路径），可以在子模块的路由中添加**路由：

// admin/admin-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { AdminNotFoundComponent } from './admin-not-found/admin-not-found.component';

const routes: Routes = [
  { path: '', component: AdminDashboardComponent },
  { path: 'settings', component: AdminSettingsComponent },
  // 捕获/admin下的所有无效路径
  { path: '**', component: AdminNotFoundComponent }
];

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

此时，访问/admin/invalid-path会触发AdminNotFoundComponent，而访问/invalid-path会触发根路由的NotFoundComponent，实现分层处理。

注意事项 #

• 全局**路由必须放在根路由配置的最后，否则会拦截所有后续路由的匹配。
• 子模块中的**路由同样要放在该子模块路由配置的最后，只会匹配该子模块父路径下的无效URL。

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