route.reuse.ts

@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private handlers = new Map<Route | null, DetachedRouteHandle>();
  shouldDetach(route: ActivatedRouteSnapshot) {
    // Determines if a route should be stored for later reuse
    return route.data['reuse'] === true;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null) {
    // Stores the detached route handle when shouldDetach returns true
    if (handle && route.data['reuse'] === true) {
      const key = route.routeConfig;
      this.handlers.set(key, handle);
    }
  }
  shouldAttach(route: ActivatedRouteSnapshot) {
    // Checks if a stored route should be reattached
    const key = route.routeConfig;
    return route.data['reuse'] === true && this.handlers.has(key);
  }
  retrieve(route: ActivatedRouteSnapshot) {
    // Returns the stored route handle for reattachment
    const key = route.routeConfig;
    return route.data['reuse'] === true ? (this.handlers.get(key) ?? null) : null;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
    // Determines if the router should reuse the current route instance
    return future.routeConfig === curr.routeConfig;
  }
}

// in app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
};

// in routes:
export const routes: Routes = [
  { 
    path: 'login', 
    component: LoginComponent,
    data: { reuse: true } 
  },
  { 
    path: 'registration', 
    component: RegistrationComponent,
    data: {reuse: true}
  },
];