NG 13 update to NG 14/15: Throttling navigation to prevent the browser from hanging

237 Views Asked by At

Started this app 5 years ago with Angular 2, till Angular 13 the dynamic routes lazy loaded works fine (with canActivate DynamicPathGuard), after a upgrade/update to NG 14/15 the browsers keeps hanging in a infinite loop here! Can't see what I'm missing here, of if there a breaking changes!

Within the attached stackblitz for reproduction: within the package.json the Angular Core is set to 13.2.0 as starter, you can see that everything works fine when you navigate.

Try updating the package.json to 14.2.0 or 15.0.2 and you see the routing doesn't work anymore, and the browser freezes after a while!

https://stackblitz.com/edit/dynamic-routes-lazy-loaded-pydumm?file=package.json

// 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;
    }
}
0

There are 0 best solutions below