Route reuse strategy throwing RangeError: Maximum call stack size exceeded in Angular 13

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

We have a considerable large angular app, where we use custom route reuse strategy for performance gains. The route reuse strategy we use was working perfectly fine in angular 12. However, when we upgraded to Angular 13 we have started seeing the following error:

Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded

The error happens in this scenario:

• Go to Route A
• Go to Route B
• Go to Route A again(either by hitting browser back, or by going to the route A through href on tag on page B), crash and navigation doesn’t happen.

The inifinite loop is happening inside Angular router’s code (router.mjs) in RouterStateSnapshot’s constructor, that calls into following function:

function setRouterState(state, node) { node.value._routerState = state; node.children.forEach(c => setRouterState(state, c)); }

Here is how we have our custom route reuse strategy:

import {
	RouteReuseStrategy,
	DetachedRouteHandle,
	ActivatedRouteSnapshot,
} from "@angular/router";

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
	private handlers: { [key: string]: DetachedRouteHandle } = {};

	constructor() {}

	public shouldDetach(_route: ActivatedRouteSnapshot): boolean {
		return true;
	}

	public store(
		route: ActivatedRouteSnapshot,
		handle: DetachedRouteHandle
	): void {
		this.handlers[route.data.title] = handle;
	}

	public shouldAttach(route: ActivatedRouteSnapshot): boolean {
		return !!this.handlers[route.data.title];
	}

	public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
		return this.handlers[route.data.title];
	}

	public shouldReuseRoute(
		future: ActivatedRouteSnapshot,
		curr: ActivatedRouteSnapshot
	): boolean {
		const reuse = future.routeConfig === curr.routeConfig;
		return reuse;
	}
}

Here is how we add route to Routing Module:

{ path: "post/:id", loadChildren: () => import("path-to-post-module").then( (module) => module.PostModule ), data: { title: "post" }, },

This may sound like a stack overflow question, but this setup used to work in Angular 12 without any issues. So, I’m not sure what changed in version 13, that’s causing this crash. If I remove the route reuse strategy, this error doesn’t happen, but obviously we want the route reuse in our app.

Please provide a link to a minimal reproduction of the bug

https://github.com/ChabuRah/angular-router-error

Please provide the exception or error you saw

Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at setRouterState (router.mjs:1610)
    at router.mjs:1612
    at Array.forEach (<anonymous>)
    at setRouterState (router.mjs:1612)
    at router.mjs:1612
    at Array.forEach (<anonymous>)
    at setRouterState (router.mjs:1612)
    at router.mjs:1612
    at Array.forEach (<anonymous>)
    at setRouterState (router.mjs:1612)
    at resolvePromise (zone.js:1213)
    at resolvePromise (zone.js:1167)
    at zone.js:1279
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.mjs:25463)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at drainMicroTaskQueue (zone.js:582)
    at invokeTask (zone.js:491)
    at ZoneTask.invoke (zone.js:476)

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.0.3
Node: 14.15.5
Package Manager: npm 6.14.11
OS: linux x64

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.3 (cli-only)
@angular-devkit/core         13.0.3 (cli-only)
@angular-devkit/schematics   13.0.3 (cli-only)
@schematics/angular          13.0.3 (cli-only)

Anything else?

No response

[ChabuRah]

Thanks @JoostK for looking into it.

@atscott We have put our update on hold due to this issue, so I’ll be more than happy to know if there is any workaround until the fix is out.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}