预加载的场景

• 当应用启动后，后续功能可能会被使用到，因此在用户可以使用基础的功能后，再去加载可能使用到的模块
• 只预加载必要的模块，可以提高首次访问网站的速度

代码实现

1 全部预加载

src\app\router\app-routing.module.ts

import { PreloadAllModules, RouterModule } from '@angular/router';

@NgModule({
imports: [
    CommonModule,
    RouterModule.forRoot(mainRoutes, {
      // 预加载全部
      preloadingStrategy: PreloadAllModules
    })
  ],
})

2 自定义预加载

自定义路由策略，此处的策略是是路由中携带该参数data: { preload: true}时预加载该模块

命令

ng g s services/preloadingStrategy

src\app\services\preloading-strategy.service.ts

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

/**
 * 预加载策略
 *
 * @export
 * @class PreloadingStrategyService
 * @implements {PreloadingStrategy}
 */
@Injectable({ providedIn: 'root' })
export class PreloadingStrategyService implements PreloadingStrategy {

    // 需要预加载的模块
    preloadedModules: string[] = [];

    preload(route: Route, load: () => Observable<any>): Observable<any> {
      if (route.data && route.data['preload']) {
        this.preloadedModules.push(route.path as string);
        return load();
      } else {
        return of(null);
      }
    }
}

如下，在访问时会预先加载welcome2模块
src\app\router\app-routing.module.ts

export const mainRoutes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('../../pages/welcome2/welcome2.module').then((x) => x.Welcome2Module),
    data: { preload: true}
  },
]

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(mainRoutes, {
      // 自定义预加载
      preloadingStrategy: PreloadingStrategyService
    })
  ],
  exports: [
    RouterModule
  ],
  providers: [ PreloadingStrategyService ]
})

参考