How can I get progress for loading Angular LazyModule file?

Question

I'm trying to figure out how can I made progress indication for loading Angular LazyLoaded Modules.

I can change preloading strategy but is there a hook somewhere to subscribe to loading progress?

export class MyPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, load: Function): Observable<any> {
        return of(true).pipe(flatMap(_ => load()));
    }
}

is it possible to subscribe to load at least to know when it was loaded?

Answer 1

You can subscribe to Router.events https://angular.io/guide/router#router-events

RouteConfigLoadStart

An event triggered before the Router lazy loads a route configuration.

RouteConfigLoadEnd

An event triggered after a route has been lazy loaded.

Let's say you have the following lazy route:

{
  path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}

And here's how you can hook to loading process of this module:

import { RouteConfigLoadEnd, RouteConfigLoadStart, Router } from '@angular/router';

...
constructor(private router: Router) {
  router.events.subscribe((
    event => {
      if (event instanceof RouteConfigLoadStart && event.route.path === 'lazy') {
        console.log('START');
      }
      if (event instanceof RouteConfigLoadEnd && event.route.path === 'lazy') {
        console.log('FINISH');
      }
    }));
}