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

【问题标题】：Angular 9 preload only specific modules and preload other modules when required and not all at a timeAngular 9 仅预加载特定模块，并在需要时预加载其他模块，而不是一次全部加载
【发布时间】：2020-09-25 20:08:29
【问题描述】：

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

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

【问题讨论】：

延迟加载模块。 angular-2-training-book.rangle.io/modules/lazy-loading-module 懒加载路线。 alligator.io/angular/lazy-loading
你能用代码而不是链接来回答吗？链接有时会死掉，使答案在以后变得无用
好点，记住这一点。

标签： angular ionic-framework lazy-loading

【解决方案1】：

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

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

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

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

【讨论】：

在这个过程中，如果父目录预加载了它的子目录，并且它的一个子目录也设置为preload:true。在这种情况下，如果我打开父级，那么只有它的子级会预加载或子级吗？
如果 preload 为真，我相信 subchild 也会预加载。因为整个路由配置在应用程序开始时被解析为预加载策略。
有什么建议不要只在孩子身上预装吗？
在孩子身上没有 preload true。
@SubhrangshuAdhikary 又添加了一个链接，您可以通过该链接进行自定义预加载。

【解决方案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]
})

【讨论】：

不，我正在寻找预加载策略来预加载特定模块。除此之外，我所有的路线都是延迟加载的。您对此有什么建议吗？

【解决方案3】：

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

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

【讨论】：