Angular 5懒加载模块路径重叠问题技术求助

嘿，这问题我太熟了——你主路由里的配置犯了一个典型的Angular路由匹配错误：两个懒加载模块共用了模糊的路径规则，加上路由匹配的顺序逻辑，直接导致了模块被覆盖。

先拆解下问题根源：
Angular的路由是按从上到下的顺序匹配的，一旦找到第一个符合规则的路由就会停止匹配。你主路由里，在guest路由之后写了一个path: ''的懒加载规则（加载UserModule），这个空路径规则会匹配几乎所有未被前面规则捕获的路径，再加上如果两个子模块的路由没有明确的前缀区分，必然会出现互相覆盖的情况。

给你几个针对性的解决方案，按优先度排序：

1. 给每个懒加载模块分配专属的父路径前缀（最推荐） #

这是最彻底的解决方式，直接从根源上隔离两个模块的路由空间：
把UserModule的主路由路径从空字符串改成专属前缀，比如user，这样两个模块的路由入口完全分开，不会有任何冲突。修改后的主路由代码如下：

const appRoutes = RouterModule.forRoot([
  {path: '', redirectTo: '/welcome', pathMatch: 'full'},
  { 
    path: 'guest', 
    loadChildren: 'app/guest-module/guest.module#GuestModule', 
  },
  { 
    path: 'user', // 替换原来的空路径，给UserModule专属前缀
    loadChildren: 'app/user-module/user.module#UserModule', 
  },
  {path: '**', component: NopageComponent},
]);

这样GuestModule的路由会匹配/guest/xxx开头的路径，UserModule匹配/user/xxx开头的路径，彻底避免覆盖问题。

2. 调整路由匹配顺序并结合守卫控制访问 #

如果你确实需要某个模块作为“默认”模块（比如用户登录后自动进入UserModule），可以调整路由规则顺序，结合路由守卫来做权限控制：
比如，给空路径的路由加上守卫，只有当用户已登录时才加载UserModule，未登录则跳转到GuestModule：

// 先导入你的AuthGuard（需要自己实现登录状态判断逻辑）
const appRoutes = RouterModule.forRoot([
  {path: '', redirectTo: '/welcome', pathMatch: 'full'},
  { 
    path: 'guest', 
    loadChildren: 'app/guest-module/guest.module#GuestModule', 
  },
  { 
    path: '', 
    loadChildren: 'app/user-module/user.module#UserModule', 
    canActivate: [AuthGuard] // 仅登录用户能进入这个模块
  },
  {path: '**', component: NopageComponent},
]);

同时要确保子模块的路由都是相对路径（比如你写的overview/:reportId就没问题，实际访问路径是/guest/overview/123），绝对不要用绝对路径（比如path: '/overview/:reportId'），不然会绕过主路由前缀直接匹配根路径，再次引发覆盖问题。

3. 检查子模块的路由配置 #

最后再确认下两个子模块的路由是否正确使用了RouterModule.forChild()，这是懒加载子模块的标准配置，要是不小心用了forRoot()也会导致路由规则混乱。比如GuestModule的路由要保持这样：

const viewRoutes = RouterModule.forChild([
  {path: 'overview/:reportId', component: HistoryOverviewComponent}
  // 其他子路由...
]);

按照上面的方法调整后，两个懒加载模块的路由就会完全隔离，不会再出现互相覆盖的问题啦！

内容的提问来源于stack exchange，提问作者Rafał Kaczmarek