Angular 12 懒加载模块场景下路由navigate方法跳转失效问题

问题修复方案 #

以下是针对该场景的逐一排查和修复步骤：

1. 检查路由守卫返回值是否正常结束

你的根路由employer配置了UserGuard守卫，若守卫返回的Observable未主动结束，会导致路由激活流程挂起，仅触发URL更新但不渲染组件。
修复方法：在守卫的返回流中增加take(1)操作符，确保流执行完成：

// UserGuard 示例
import { take } from 'rxjs';

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  return this.userService.isLogin$.pipe(
    take(1), // 必须加，确保流获取一次结果后结束
    map(isLogin => isLogin ? true : this.router.parseUrl('/login'))
  )
}

2. 检查router.navigate调用是否在Angular Zone外执行

如果你的navigate方法是在第三方回调、定时器、未被Angular接管的异步逻辑中调用，会导致变更检测未触发，出现URL更新但视图不刷新的问题。
修复方法：用NgZone包裹路由跳转逻辑，强制在Angular执行上下文中运行：

import { NgZone } from '@angular/core';
import { Router } from '@angular/router';

constructor(private ngZone: NgZone, private router: Router) {}

// 跳转逻辑
someAsyncCallback() {
  // 你的业务逻辑
  this.ngZone.run(() => {
    this.router.navigate(['/employer/detail', 123]);
  })
}

3. 检查是否存在重复的RouterModule实例

RouterModule.forRoot()全局只能在根路由模块中导入一次，若你的SharedModule等公共模块中错误导入了RouterModule.forRoot([])，会生成多个路由实例，导致路由状态不同步。
修复方法：所有子模块、公共模块仅导入RouterModule本身，或者根据需求导入RouterModule.forChild(子路由)，禁止在根模块以外的地方调用forRoot。

4. 开启路由调试日志定位问题

如果以上步骤未解决，可以开启路由跟踪日志，查看跳转流程具体卡在哪一步：

// app-routing.module.ts 修改
@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

开启后控制台会输出路由跳转的全流程日志，可根据日志定位是懒加载完成后哪一步执行异常。

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