Angular Custom RouteReuseStrategy: TypeError from Angular Internal Code (component-tree.ts)

I'm implementing a custom RouteReuseStrategy in Angular 18 to cache specific routes based on a reuse flag in the route configuration. However, I'm encountering a TypeError related to Angular's internal code (component-tree.ts) when navigating between routes.

TypeError: Cannot read properties of undefined (reading 'startsWith') at stripUnderscore (component-tree.ts:341:11)


The error seems to originate from the stripUnderscore function within Angular's internals, where startsWith is called on an undefined value. I have added a extra checking for the component name but still i am getting the error

@Injectable()
export class CachedRouteReuseStrategy implements RouteReuseStrategy {
// A map that stores the detached route handles, using component names as keys
private readonly handlersMap = new Map<string, DetachedRouteHandle>();


public shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route?.data?.['reuse'] ?? false;
}


public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
const routeComponentName = route.routeConfig?.component?.name;
if (routeComponentName && !!route.data?.['reuse'] && !!handle) {
this.handlersMap.set(routeComponentName, handle);
}
}


public shouldAttach(route: ActivatedRouteSnapshot): boolean {
const routeComponentName = route.routeConfig?.component?.name;
return (
!!routeComponentName && !!route.routeConfig && this.handlersMap.has(routeComponentName)
);
}


public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
const routeComponentName = route.routeConfig?.component?.name;
return !!routeComponentName ? (this.handlersMap.get(routeComponentName) ?? null) : null;
}


public shouldReuseRoute(
future: ActivatedRouteSnapshot,
current: ActivatedRouteSnapshot
): boolean {
return future.routeConfig === current.routeConfig && !!future.routeConfig?.data?.['reuse'];
}
}


Dashboard Route

export const dashboardRoutes: Routes = [
{
path: 'dashboard',
title: 'Dashboard',
component: DashboardComponent,
data: {
reuse: true,
pageTitle: 'dashboard'
}
}
];

Continue reading...