Angular子路由空路径加载子模块：路由匹配失败问题求解

核心原因 #

你当前父路由里abc/:id的子路由配置了pathMatch: 'full'，这个规则会强制要求路径完全匹配abc/:id（无后续分段）才加载子模块，但你需要让子模块的kkk、nnn路由作为abc/:id的后续路径，所以pathMatch: 'full'会阻断后续路径的匹配，导致访问abc/1/kkk这类路径时找不到对应路由。

修复步骤 #

1. 修改父路由配置 #

移除加载子模块路由中的pathMatch: 'full'：

const routes: Routes = [
  {
    path: '',
    component: BaseRoutingComponent,
    canActivate: [AuthGuardService],
    data: {
      expectedRoles: ["superadmin", "admin", "office", "fieldrep", "salesperson"]
    },
    children: [
      {
        path: '',
        component: AdminDashboardComponent,
        canActivate: [AuthGuardService],
        data: {
          expectedRoles: ["superadmin", "admin", "office", "fieldrep", "salesperson"]
        }
      },
      {
        path: 'upload-tools',
        loadChildren: () => import('././modules/uploads/uploads.module').then(m =>
          m.UploadsModule),
        data: { 'preload': true }
      },
      {
        path: 'abc/:id',
        component: AbcComponent,
        canActivate: [AuthGuardService],
        data: {
          expectedRoles: ["superadmin", "admin"]
        },
        children: [
          {
            path: '', // 保留空路径
            loadChildren: () => import('./modules/bcd.module').then(m =>
              m.BcdModule),
          }
        ]
      },
    ]
  }
];

2. 修正子路由模块语法错误 #

你的子路由代码存在语法问题（路由对象间缺少逗号、数组闭合不完整），修正后如下：

const routes: Routes = [
  {
    path: 'kkk',
    component: KKKComponent,
    canActivate: [AuthGuardService],
    data: {
      expectedRoles: ["superadmin", "admin"]
    }
  },
  {
    path: 'nnn',
    component: NNNComponent,
    canActivate: [AuthGuardService],
    data: {
      expectedRoles: ["superadmin", "admin"]
    }
  }
];

原理说明 #

当父路由的子路径设为空且未配置pathMatch: 'full'时，Angular会将子模块的路由合并到当前父路由（abc/:id）下作为子路由匹配。此时访问abc/1/kkk会先匹配abc/:id，再匹配子模块中的kkk路径，从而正确加载KKKComponent；abc/1/nnn同理。

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