Angular 9只预加载特定的模块，在需要的时候才预加载其他模块，而不是一次全部加载。

Question

 RouterModule.forRoot(routes,
    { preloadingStrategy: PreloadAllModules })

Angular的官方文档提供了这种预加载策略，可以预加载所有模块。但是，我不希望几个模块全部加载起来。我希望子目录在打开父目录后预加载。同时，预加载其他可能的模块，这些模块可以从当前的活动路由中调用。我不希望所有的模块都在开始时预加载。如何做到这一点？

Answer 1

你可以引入一个所有路由的数据属性来决定哪些模块要预加载，哪些不预加载，并实现PreloadAllModule，根据这个数据标志来改变实现。

参考：- https:/coryrylan.comlogcustom-preload-and-lazy-loading-strategies-with-angular。

Answer 2

我们可以使用自定义的预加载策略。例如： :

import { PreloadingStrategy, Route } from '@angular/router';

import { Observable, of } from 'rxjs';

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

然后在模块中。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppCustomPreloader } from './app-routing-loader';
import { Feature1Component } from './feature-1/feature-1.component';

const routes: Routes = [
  {
    path: 'route',
    loadChildren: './example.module#ExampleModule',
    data: { preload: true } // Custom property
  }
];

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