"RouteReuseStrategy" and "LazyLoad" don't work after upgrading from Angular 12 to 13

51 Views Asked by At

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.

0

There are 0 best solutions below