如何获得加载 Angular LazyModule 文件的进度？

Question

我想知道如何为加载 Angular LazyLoaded 模块制作进度指示。

我可以更改预加载策略，但是否有某个地方可以订阅加载进度的挂钩？

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

是否可以订阅 load 至少知道加载时间？

Answer 1

您可以订阅Router.eventshttps://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.

假设您有以下惰性路线：

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

下面是如何挂钩到此模块的加载过程：

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

如何获得加载 Angular LazyModule 文件的进度？

How can I get progress for loading Angular LazyModule file?

angular

angular-router