Angular12路由守卫调用router.navigate直接访问懒加载子路由报错

问题根因 #

你在canActivate守卫的同步回调中直接调用this.router.navigate触发新导航时，当前路由的激活流程还未完成：直接地址栏访问懒加载模块子路由的场景下，Angular刚初始化懒加载模块的路由出口，同时守卫触发的新导航也要操作同一个主出口，两个激活流程并发冲突，就抛出了"Cannot activate an already activated outlet"错误。
注释跳转逻辑后仅返回false只会拦截当前导航，不会触发新的导航流程，因此冲突消失但功能不符合预期。

最优解决方案（官方推荐） #

Angular 7及以上版本支持路由守卫直接返回UrlTree对象，框架会自动中断当前导航流程，执行新的跳转逻辑，完全避免并发导航冲突，无需手动调用navigate。
修改后的AnonymousGuard代码如下：

// 首先确保构造函数中已注入Router
constructor(private router: Router, /* 其他依赖 */) {}

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
// 修改返回类型为boolean | UrlTree的Observable
): Observable<boolean | UrlTree> {
  return this.authStore.pipe(
    withLatestFrom(this.authStore.pipe(select(isAnonymousSelector))),
    map(([, isAnonymous]) => {
      if (isAnonymous) return true;
      // 直接返回跳转目标的UrlTree，由Angular路由框架统一处理跳转
      return this.router.parseUrl('/shop');
    })
  );
}

该方案完全符合Angular路由设计规范，适配懒加载场景，不会出现时序冲突。

备用兼容方案 #

如果有特殊场景无法使用UrlTree，可以将跳转逻辑放到微任务队列，等当前导航拦截流程完全结束后再触发新导航，示例如下：

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean> {
  return this.authStore.pipe(
    withLatestFrom(this.authStore.pipe(select(isAnonymousSelector))),
    map(([, isAnonymous]) => {
      if (isAnonymous) return true;
      // 用setTimeout将跳转逻辑延后到当前同步流程执行完毕后触发
      setTimeout(() => this.router.navigate(["/shop"]), 0);
      return false;
    })
  );
}

该方案为降级方案，优先使用第一种返回UrlTree的方式。

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