Angular 9仅预装特定模块，并在需要时预装其他模块，而不是一次预装所有模块

Question

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

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

Answer 1

您可以引入一个具有所有路由的数据属性，以决定哪些模块需要预加载，哪些模块不需要预加载，还可以实现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 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]
})

Answer 3

我已经创建了一个简短的视频，解释了如何创建自定义预加载策略- https://www.youtube.com/watch?v=tDQc3CCvKfc预加载模块，在加载所有主要模块后会有延迟。

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