In Angular 12, "RouteReuseStrategy" works perfectly. However, after upgrading to Angular 13, "RouteReuseStrategy" stopped working. After careful examination, I noticed that the issue only occurs when components are loaded using "Lazy Load." When the same exercise is performed with components called directly, it works without any issues.
handlers: { [key: string]: DetachedRouteHandle } = {}
// Decides if the route should be stored
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return true;
}
// Store the information for the route we're destructing
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
const URL = this.getFullUrl(route);
this.handlers[URL] = handle;
}
// Return true if we have a stored route object for the next route
shouldAttach(route: ActivatedRouteSnapshot): boolean {
const URL = this.getFullUrl(route);
return !!this.handlers[URL];
}
// If we returned true in shouldAttach(), now return the actual route data for restoration
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
const URL = this.getFullUrl(route);
const COMPONENT: DetachedRouteHandle = this.handlers[URL];
return COMPONENT ? COMPONENT : null;
}
// Reuse the route if we're going to and from the same route
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return this.getFullUrl(curr) === this.getFullUrl(future);
}
private getFullUrl(route: ActivatedRouteSnapshot) {
const subRoutes: UrlSegment[] = [].concat.apply(
[],
route.pathFromRoot.map(subRoute => subRoute.url)
);
const urlSegments = subRoutes.map(subRoute => subRoute.path);
return `/${urlSegments.join('/')}`;
}
When attempting to change the route to a component saved by the "RouteReuseStrategy" but loaded via "LazyLoad," it doesn't update the URL and also doesn't refresh the view (it doesn't switch to the currently displayed component). However, when I do it with a component that hasn't been loaded via "Lazy Load," it works perfectly.
I don't know what else to try, I really appreciate your help.