Angular 9 仅预加载特定模块，并在需要时预加载其他模块，而不是一次全部预加载

Question

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

Angular的官方文档提供了这种预加载策略来预加载所有模块。但是，我不想加载所有的几个模块。我希望在打开父目录后预加载子目录。此外，预加载其他可以从当前活动路由调用的可能模块。我不希望所有模块都在开始时预加载。我该怎么做？

Answer 1

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

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]
})

Answer 2

您可以引入一个包含所有路由的数据属性来决定预加载哪些模块和不预加载哪些模块，并根据此数据标志实现 PreloadAllModule 和更改实现。

参考：- https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular

您可以通过在 Appcomponent 中使用一些自定义代码来进行自定义预加载，而不是通过预加载策略。为此，请参阅：-

https://medium.com/dev-genius/advanced-preloading-strategy-for-large-applications-in-angular-cd7ac2b763af

Answer 3

我制作了一个关于如何创建自定义预加载策略的简短视频说明 - https://www.youtube.com/watch?v=tDQc3CCvKfc 在加载所有主要模块后延迟预加载模块。

这是代码 - https://github.com/stevermeister/AngularPro-Screencast/tree/master/code/Season4-Router-Features/preloading

Angular 9 仅预加载特定模块，并在需要时预加载其他模块，而不是一次全部预加载

Angular 9 preload only specific modules and preload other modules when required and not all at a time

lazy-loading

ionic-framework

angular