Angular13升级至14/15后路由无限循环致浏览器卡顿求助

5年前基于Angular 2开发的应用，在Angular 13版本中，通过搭配canActivate的DynamicPathGuard实现的动态路由懒加载功能运行正常。但升级至Angular 14/15后，浏览器陷入无限循环并卡顿，不清楚遗漏了什么或是存在破坏性更新。

复现情况 #

• 初始package.json中Angular Core版本为13.2.0，导航功能正常；
• 将版本更新至14.2.0或15.0.2后，路由失效，浏览器不久后冻结。

相关代码（dynamicPathGuard.ts） #

import { Injectable, Component } from '@angular/core';
import {
    Router,
    CanActivate,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
} from '@angular/router';
import { parseUrlPathInSegments } from '../classes/url-path-parser';

@Injectable()
export class DynamicPathGuard implements CanActivate {
    constructor(private router: Router) {}
    
    async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const segments = parseUrlPathInSegments(state.url);
        const lastPath = segments.pop();
    
        if (lastPath === 'dynamic') {
            this.router.navigateByUrl(state.url);
        } else {
            this.router.navigateByUrl('/404');
        }
    
        return false;
    }
}

问题根源 #

Angular 14对路由守卫的导航行为做了破坏性更新：当守卫返回false同时调用router.navigate()时，旧版本（Angular 13及以前）会终止当前导航并执行新导航，但Angular 14+中，这种操作会触发新的导航循环——因为守卫返回false会取消当前导航，而navigateByUrl又发起新导航，新导航再次触发同一守卫，最终导致无限循环。

另外代码中存在逻辑错误：当lastPath === 'dynamic'时，调用this.router.navigateByUrl(state.url)导航到当前正在访问的URL，本身就会触发重复导航，在Angular 13中可能因旧导航逻辑未触发循环，但新版本路由机制放大了这个问题。

修复步骤 #

1. 移除无效的重复导航：路径符合条件时，直接返回true允许导航，无需调用navigateByUrl重复跳转；
2. 修正守卫返回逻辑：用返回UrlTree的方式实现导航（Angular推荐的守卫导航方式），避免返回false同时发起导航。

修改后的DynamicPathGuard代码：

import { Injectable } from '@angular/core';
import {
    Router,
    CanActivate,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
    UrlTree
} from '@angular/router';
import { parseUrlPathInSegments } from '../classes/url-path-parser';

@Injectable()
export class DynamicPathGuard implements CanActivate {
    constructor(private router: Router) {}
    
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
        const segments = parseUrlPathInSegments(state.url);
        const lastPath = segments.pop();
    
        if (lastPath === 'dynamic') {
            // 符合条件，允许导航
            return true;
        } else {
            // 不符合条件，返回UrlTree跳转到404，无需额外调用navigate
            return this.router.parseUrl('/404');
        }
    }
}

额外说明 #

• Angular 14+中，路由守卫推荐通过返回UrlTree实现导航跳转，而非在守卫内部调用navigate同时返回false，这种方式能避免导航循环，更符合Angular路由设计规范；
• 移除了不必要的async修饰符，守卫逻辑无需异步操作，同步逻辑更高效。

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