angular - Angular2 doesn't work Custom Reuse Strategy with Lazy module loading

Question

I tried to use custom reuse strategy in my angular2 project, but I found it doesn't work with lazy module loading. Anyone who know about this? My project is angular 2.6.4

reuse-strategy.ts

import {RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";

export class CustomReuseStrategy implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldDetach', route);
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
        return future.routeConfig === curr.routeConfig;
    }

}

app.module.ts

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', loadChildren: 'app/hero-list.module#HeroListModule' },
  { path: '',   redirectTo: '/crisis-center', pathMatch: 'full' }
];
@NgModule({
  imports: [ ... ],
  declarations: [ ... ],
  providers:[
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

and I put <input> to both component and I tested it.

the value of input in CrisisListComponent is stored but, the value of HeroListComponent lazy-loaded is not preserved.

I don't know it's not supported yet. Thank you for helping me.

Answer 1

RouteReuseStrategy does work with LazyLoaded components.

The problem here is that you're using route.routeConfig.path as the key to store and retrieve the Handles.

I don't know why, but with LazyLoaded modules, route.routeConfig.path is empty when executing shouldAttach

The solution I use is to define a custom key in my routes, like:

{ path: '...', loadChildren: '...module#...Module', data: { key: 'custom_key' } }

This key value can be easily accessed in the ActivatedRouteSnapshot, like:

route.data.key

With this key you can store and retrieve the handles correctly.