title: Angular2 doesn't work Custom Reuse Strategy with Lazy module loading
body: <p>I tried to use <a href="https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx" rel="noreferrer"><strong>custom reuse strategy</strong></a> in my angular2 project,
  but I found it doesn't work with <strong>lazy module loading</strong>.
  Anyone who know about this? My project is angular 2.6.4</p>
  
  <p>reuse-strategy.ts</p>
  
  <pre><code>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 &amp;&amp; !!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;
      }
  
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>and I put <code>&lt;input&gt;</code> to both component and I tested it.</p>
  
  <p>the value of input in <code>CrisisListComponent</code> is stored but, the value of <code>HeroListComponent lazy-loaded</code> is not preserved.</p>
  
  <p>I don't know it's not supported yet.
  Thank you for helping me.</p>