Angular懒加载模块多路由仅首个路由生效问题

首先把你给子路由加foo/前缀的修改全部撤回，这个改法完全不符合Angular惰性加载的路由匹配规则：

• 父级路由匹配到foo路径段后，会自动把已匹配的foo段从URL中截掉，只把剩余的路径段传给子模块路由做匹配
• 子路由写foo/first实际对应的完整访问路径是foo/foo/first，根本不会被正常命中，先把子路由恢复成最初的配置：

// foo-routing.module.ts 正确的基础配置
const routes: Routes = [
    {
      path: '',
      redirectTo: 'first',
      pathMatch: 'full'
    },
    {
      path: 'first',
      component: FirstComponent,
    },
    {
      path: 'second',
      component: SecondComponent
    }
];

按优先级从高到低排查以下问题：

1. 检查SecondComponent的模块声明 #

这是该场景下最高发的问题：

• 确认SecondComponent已经被加入FooModule的declarations数组
• 如果你是把SecondComponent声明在其他模块里，确认那个模块已经被导入到FooModule中
  first路径能正常访问只能证明FirstComponent的声明是正确的，SecondComponent漏声明时，路由匹配到second段后会因为找不到可用组件导致匹配失败，回退命中空路径的重定向规则，最终跳回first。

2. 检查模块导入与路由注册顺序 #

打开foo.module.ts检查：

• 子模块路由必须用RouterModule.forChild(routes)注册，绝对不能在子模块里调用RouterModule.forRoot()，forRoot方法仅能在根路由模块中使用一次
• FooRoutingModule要放在imports数组的靠后位置，避免其他导入的带路由配置的模块里提前写了空路径重定向、通配路由，拦截掉second的匹配逻辑。

3. 检查跳转逻辑干扰 #

• 查看second路由是否配置了canActivate/canLoad等路由守卫，守卫逻辑判断不通过时是否直接跳转到了first路径
• 检查SecondComponent的初始化逻辑（ngOnInit、构造函数）里是否写了强制跳转代码
• 检查全局是否有路由事件订阅逻辑，在识别到访问foo/second时触发了重定向。

4. 调试定位技巧 #

如果以上排查都没找到问题，可以在根组件中临时加路由事件日志，精准定位重定向触发点：

import { NavigationStart, NavigationEnd, NavigationError, RoutesRecognized, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

// 构造函数注入router后，在ngOnInit里加以下代码
this.router.events.pipe(
  filter(e => e instanceof NavigationStart || e instanceof NavigationEnd || e instanceof NavigationError || e instanceof RoutesRecognized)
).subscribe(e => console.log('路由事件：', e));

访问foo/second时看控制台输出：如果有NavigationError事件，直接看错误信息就能定位问题（比如组件未声明、路由守卫返回值异常等）；如果是NavigationStart到foo/second之后立刻又触发了到foo/first的NavigationStart，就顺着调用栈找触发跳转的代码即可。

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