Angular lazy loaded module 401

By using a PreloadingStrategy that preloads the lazyloaded modules this can be prevented since the application no longer needs to GET the specific module on route change when the user is no longer authenticated.

preload-strategy.ts (taken from John Papa repo link)

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

export class PreloadSelectedModulesList implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data['preload'] ? load() : of(null);
  }
}

app-routing.module.ts

import { PreloadSelectedModulesList } from './core/preload-strategy';
    const routes: Routes = [
        // Eagerly loaded
        { path: '', component: HomeComponent, pathMatch: 'full' },
        // Preloaded module
        { path: 'preloaded', loadChildren: './preloaded/preloaded.module#PreloadModule', data: {preload: true}},
        // Lazy loaded module
        { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'}
    ];

@NgModule({
    imports: [
        RouterModule.forRoot(routes, {
            preloadingStrategy: PreloadSelectedModulesList
        })
    ],
    exports: [RouterModule],
    providers: [ PreloadSelectedModulesList, ..., ... ]
})

export class AppRoutingModule { }

There could still be a small edge-case where the user suddenly becomes unauthorized while trying to GET a module, in this case one workaround could be what Abris mentions above, extending Angulars ErrorHandler and checking thrown errors for module loading.

error-handler.ts

import { ErrorHandler } from '@angular/core';

export default class MyErrorHandler extends ErrorHandler {

 constructor() { 
   super();
 }

  handleError(error) {
      // Check and take appropriate actions
      ...
      // delegate to the default handler
      super.handleError(error); 

  }
}