I have implemented router reuse strategy. Here is my code which is basically out of box Angular core:

export class AWARouteReuseStrategy implements RouteReuseStrategy {
private handlers: { [key: string]: DetachedRouteHandle } = {};
constructor(private awaDetachedComponentTrackingService: DetachedComponentTrackingService) {}

shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (!route.routeConfig || route.routeConfig.loadChildren) {
        return false;
    }
    let shouldReuse = false;
    if (route.routeConfig.data && route.routeConfig.data.reuse) {
        shouldReuse = true;
    }
    return shouldReuse;
}
store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    if (handler) {
        this.handlers[this.getUrl(route)] = handler;
    }
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this.handlers[this.getUrl(route)] && this.awaDetachedComponentTrackingService.getAttachAction(route.routeConfig?.path);
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig || route.routeConfig.loadChildren) {
        return null;
    }
    return this.handlers[this.getUrl(route)];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === current.routeConfig;
}
getUrl(route: ActivatedRouteSnapshot): any {
    if (route.routeConfig) {
        const url = route.routeConfig.path;
        return url;
    }
}
}

As I understand when components are detached, they are cached into the store. My components have a large memory footprint, and I am thinking to implement in-memory db like IndexedDB for caching purposes. Sounds crazy, but has anyone thought about something like this? Please share your thoughts.

Thanks