Today I Learned

TIL, 2022-08-31, Preloading and lifecycle hook for module loading

Preloading Strategies to Speed Up Angular App Loading Time

Reference

  • Preloading modules: Loading modules async in the background.
  • Preloading component data via Angular resolver.
  • Available strategies:
    • Built-in preloading via no preloading, or PreloadAllModules.
    • Custom preloading strategies: preload after some time, preload based on network quality, load required modules first, frequently used second, and others lazy load/last.
  • Commands to see:
    • return of(null) - don’t preload.
    • return fn() - preload.
import {Injectable} from '@angular/core';
import {PreloadingStrategy, Route} from '@angular/router';
import {Observable, of} from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class CustomPreloadingStrategyService implements PreloadingStrategy {
preload(route: Route, fn: () => Observable<any>): Observable<any> {
    if (route.data && route.data.preload) {
      return fn();
    }
    return of(null);
  }
}
  • We can do canActivate and canLoad router guard.

Angular 2 - Lifecycle hooks for lazy loaded modules

Reference

  • Constructor should do this.
@NgModule({...})
export class MyLazyModule {
  constructor(/* service injection here if required */) {
    console.log('lazy module loaded');
  }
}

This project is maintained by daryllxd