Angular 2 router reuse strategy with lazy loading and deep module structure

Question

I'm new to angular and I'm trying to implement the following router reuse strategy along with lazy loading:

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;
    }

}

Moreover, in my project I have a deep module structure. I've created a plunker which illustrates the basic structure of my project and what I'm trying to do, but it does not work at all. Can somebody, please, help me?

See the answer in this [link](https://stackoverflow.com/questions/42383546/angular2-doesnt-work-custom-reuse-strategy-with-lazy-module-loading), worked for me perfectly. — Nikita Marinosyan, Nov 27 '17 at 22:21

score 2 · Accepted Answer · answered Mar 01 '18 at 22:02

Solved this. See the answer in this link, worked for me perfectly.

My app-routing.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './shared/auth/auth.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: './layout/layout.module#LayoutModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'login', loadChildren: './login/login.module#LoginModule',
    data: { key: 'login', shouldDetach: 'no' }
  },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule', data: { key: 'not-found' } },
  { path: '**', redirectTo: 'not-found' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

My custom-reuse-strategy.ts:

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

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
      if (route.data.shouldDetach === 'no') {
        return false;
      }

      return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
      this.handlers[route.data.key] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
      return !!route.data.key && !!this.handlers[route.data.key];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
      if (!route.data.key) {
        return null;
      }
      return this.handlers[route.data.key];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
      return future.data.key === curr.data.key;
    }

}

can we pass Dynamic data from one route to another route – Sagar Jadhav May 17 '18 at 11:40 — Sagar Jadhav, May 17 '18 at 11:40

Angular 2 router reuse strategy with lazy loading and deep module structure

1 Answers1