可以在 Angular 8 中预加载延迟加载的模块吗？答案

【问题标题】：It is possible to pre load a lazy loaded module in Angular 8?可以在 Angular 8 中预加载延迟加载的模块吗？
【发布时间】：2019-09-09 16:00:08
【问题描述】：

我知道当一个应用程序有很多部分和组件时，最好将它们分成延迟加载的模块，这样用户就可以快速看到应用程序主页。

问题是我注意到，到延迟加载模块组件的导航在用户交互（单击按钮/菜单）和显示组件时（与非延迟加载组件相比）之间存在一些滞后。

有没有办法手动预加载延迟加载的模块？假设用户看到了主屏幕，如果 3 秒内没有任何操作，则在后台加载我的一些关键应用模块。

【问题讨论】：

标签： angular

【解决方案1】：

您可以通过设置data: { preload: true }而不是使用PreloadAllModules的所有模块来仅对一个模块使用preload策略。

{
  path: 'crisis-center',
  loadChildren: () => import('./crisis-center/crisis-center.module').then(mod => mod.CrisisCenterModule),
  data: { preload: true }
},

【讨论】：

这看起来不错。当 crisis-center 模块被加载（我的意思是加载子模块）时，我可能会做同样的事情。我不是吗？
顺便说一句，我从未听说过data.preload: true 选项。你确定它以前工作过吗？你活得越多，你学到的就越多。 :)

【解决方案2】：

是的，您可以使用 preloadingStrategy

你必须像这样添加它：

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

例子：

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

const appRoutes: Routes = [
  { path: 'employees', loadChildren: './employee/employee.module#EmployeeModule' },
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {preloadingStrategy : PreloadAllModules } )],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

这是一个很好的Article

【讨论】：