ChunkLoadError / 未处理的承诺拒绝 Ionic 5 /angular

Question

我正在尝试向我的 ionic 5 应用程序添加离线功能。为此，我实现了在连接时将信息存储在 sql lite 中的逻辑，并且在离线时从 sql lite 而不是 http 请求中获取数据。

  obtenerVisitaDetalle(idVisita: number): Observable<any> {

if (this.networkService.getCurrentNetworkStatus() == ConnectionStatus.Offline) {
  return from(this.getLocalData(`Visita/${idVisita}`));
} else {
  return this.http.get<any[]>(environment.UrlBaseApi + `Visita/${idVisita}`, this.httpOptions).pipe(
    tap(res => {
      this.setLocalData(`Visita/${idVisita}`, res);
    })
  )
}

}

到目前为止一切顺利，但我遇到了以下问题：

https://github.com/ionic-team/ionic-framework/issues/20859

基本上当我离线时，我无法打开像模态这样的组件，因为这些组件尚未预加载。评论上面提到的使用服务工作者提前预取您需要的块/资产的链接。

任何指导，例如如何实现这一点，我们将不胜感激。谢谢

编辑：根据第一个答案，我提供了部分路由文件。

  {
path: 'pago',
canActivate: [UserAuthenticatedGuard],
loadChildren: () => import('./Pages/pago/pago.module').then( m => m.PagoPageModule)
  }
];


@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})

Answer 1

Angular Cli V6 支持预加载，因此您可能需要查看https://angular.io/api/router/PreloadAllModules。基本上，您可以通过将以下内容添加到 RouterModule 来预加载所有模块。

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

或者您可以通过定义自定义 PreloadingStrategy 来预加载特定路由。

export class CustomPreloadingStrategy implements PreloadingStrategy { 
     preload(route: Route, load: Function): Observable<any> {  
         return route.path == 'YOUR_PATH' ? load() : of(null); 
     }
}