可以在Angular 8中預加載延遲加載的模塊嗎？

Question

我知道當一個應用程序有很多零件和組件時，最好將它們分成延遲加載的模塊，這樣用戶就可以快速看到應用程序主頁。

事情是我注意到導航到延遲加載模塊的組件顯示用戶交互（單擊按鈕/菜單）和顯示組件（與非延遲加載組件比較）之間的一些延遲。

有沒有辦法手動預加載延遲加載的模塊？ 所以假設用戶看到主屏幕，如果在3秒內沒有完成任務，那么在后台加載我的一些關鍵應用模塊。

Answer 1

通過使用PreloadAllModules設置data: { preload: true }而不是所有模塊，您可以僅為一個模塊使用preload策略。

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

Answer 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 { } 

這是一篇很好的文章