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, worked for me perfectly.

Nikita Marinosian
– Nikita Marinosian

2017-11-27 22:21:10 +00:00
Commented Nov 27, 2017 at 22:21 — Nikita Marinosian
– Nikita Marinosian, Commented Nov 27, 2017 at 22:21

Nikita Marinosian · Accepted Answer · 2018-03-01 22:02:00Z

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

}

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related