fix: mark cache for clearing for better consistency

Author: edusperoni

packages/angular/src/lib/legacy/router/ns-route-reuse-strategy.ts

@@ -9,6 +9,7 @@ interface CacheItem {
   key: string;
   state: DetachedRouteHandle;
   isModal: boolean;
+  markedForDeletion?: boolean;
 }
 
 const getSnapshotKey = function (snapshot: ActivatedRouteSnapshot): string {
@@ -52,6 +53,28 @@ class DetachedStateCache {
     }
   }
 
+  public markCurrentForClear() {
+    for (const item of this.cache) {
+      item.markedForDeletion = true;
+    }
+  }
+
+  public clearMarked() {
+    // try to preserve same order as .clear()
+    for (let i = this.cache.length - 1; i >= 0; i--) {
+      const cacheItem = this.cache[i];
+      if (cacheItem.markedForDeletion) {
+        const state = <any>cacheItem.state;
+        if (!state.componentRef) {
+          throw new Error('No componentRef found in DetachedRouteHandle');
+        }
+
+        destroyComponentRef(state.componentRef);
+        this.cache.splice(i, 1);
+      }
+    }
+  }
+
   public clearModalCache() {
     let removedItemsCount = 0;
     const hasModalPages = this.cache.some((cacheItem) => {
@@ -259,6 +282,14 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy {
     }
   }
 
+  markCacheForClear(outletKey: string) {
+    const cache = this.cacheByOutlet[outletKey];
+
+    if (cache) {
+      cache.markCurrentForClear();
+    }
+  }
+
   popCache(outletKey: string) {
     const cache = this.cacheByOutlet[outletKey];
 
@@ -272,6 +303,25 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy {
     }
   }
 
+  markCacheForPop(outletKey: string) {
+    const cache = this.cacheByOutlet[outletKey];
+
+    if (cache) {
+      const item = cache.peek();
+      if (item) {
+        item.markedForDeletion = true;
+      }
+    }
+  }
+
+  clearMarkedCache(outletKey: string) {
+    const cache = this.cacheByOutlet[outletKey];
+
+    if (cache) {
+      cache.clearMarked();
+    }
+  }
+
   clearModalCache(outletKey: string) {
     const cache = this.cacheByOutlet[outletKey];
 

packages/angular/src/lib/legacy/router/page-router-outlet.ts

@@ -434,6 +434,7 @@ export class PageRouterOutlet implements OnDestroy, RouterOutletContract {
     const currentRoute = this.activatedRoute;
     // Clear refCache if navigation with clearHistory
     if (navOptions.clearHistory) {
+      this.outlet.outletKeys.forEach((key) => this.routeReuseStrategy.markCacheForClear(key));
       const wipeCache = callableOnce(() => {
         if (this.postNavFunction === wipeCache) {
           this.postNavFunction = null;
@@ -442,7 +443,7 @@ export class PageRouterOutlet implements OnDestroy, RouterOutletContract {
           // potential alternative fix (only fix children of the current outlet)
           // const nests = outletKey.split('/');
           // this.outlet.outletKeys.filter((k) => k.split('/').length >= nests.length).forEach((key) => this.routeReuseStrategy.clearCache(key));
-          this.outlet.outletKeys.forEach((key) => this.routeReuseStrategy.clearCache(key));
+          this.outlet.outletKeys.forEach((key) => this.routeReuseStrategy.clearMarkedCache(key));
         }
       });
       this.postNavFunction = wipeCache;
@@ -453,6 +454,7 @@ export class PageRouterOutlet implements OnDestroy, RouterOutletContract {
 
       page.once(Page.navigatedToEvent, clearCallback);
     } else if (navOptions.replaceUrl) {
+      this.outlet.outletKeys.forEach((key) => this.routeReuseStrategy.markCacheForPop(key));
       const popCache = callableOnce(() => {
         if (this.postNavFunction === popCache) {
           this.postNavFunction = null;
@@ -461,7 +463,7 @@ export class PageRouterOutlet implements OnDestroy, RouterOutletContract {
           // potential alternative fix (only fix children of the current outlet)
           // const nests = outletKey.split('/');
           // this.outlet.outletKeys.filter((k) => k.split('/').length >= nests.length).forEach((key) => this.routeReuseStrategy.popCache(key));
-          this.outlet.outletKeys.forEach((key) => this.routeReuseStrategy.popCache(key));
+          this.outlet.outletKeys.forEach((key) => this.routeReuseStrategy.clearMarkedCache(key));
         }
       });
       this.postNavFunction = popCache;