时间戳

首页 > 解决方案 > 如何在 ionic 4 中预取（+预加载）特定模块？

angular - 如何在 ionic 4 中预取（+预加载）特定模块？

问题描述

当 preloadingStrategy设置为 时PreloadAllModules，我的应用程序正在获取我创建的所有模块/组件。但我不确定该应用程序是否也在获取 Ionic 的所有模块/组件。

实际上，当用户执行某些操作而应用程序处于脱机状态时，我需要显示错误模态。但是在离线模式下，Ionic 组件都不起作用（因为它们没有预加载），尽管我自己的组件和路由工作正常。

所以我需要知道如何预加载 Ionic 的特定模块/组件？就我而言ModalController

错误如下：

  1. “获取http://localhost:8100/40.js网络::ERR_INTERNET_DISCONNECTED”
  2. core-ca0488fc.js:63 ChunkLoadError：加载块 40 失败。（错误：http://localhost:8100/40.js）在 webpackAsyncContext（ http://localhost:8100）的 Array.map（）的 requireEnsure（ http ://localhost:8100/runtime.js:127:26）/main.js:425:34 ) 在 loadModule ( http://localhost:8100/vendor.js:167829:166 ) 在 initializeComponent ( http://localhost:8100/vendor.js:169460:20 ) 在http: //localhost:8100/vendor.js:169601:32 在 ZoneDelegate.invoke ( http://localhost:8100/polyfills.js:3594:26 ) 在 Zone.run ( http://localhost:8100/polyfills.js :3359:43）在http://localhost:8100/polyfills.js:4090:36 在 ZoneDelegate.invokeTask （http://localhost:8100/polyfills.js:3626:31 )

标签： angularionic4

解决方案

我使用了自定义 PreloadService ，它直接在它的构造函数中启动假模式：

@Component({
  template: '<div></div>'
})
class StubComponent {}

@Injectable({
  provideIn: 'root'
})
export class PreloadIonicComponentService {
  constructor(private modalCtrl: ModalController) {
    modalCtrl.create({
     component: StubComponent
    }).then(m => m.dismiss());
  }
}

然后我在 app.component.ts 的构造函数参数中使用了这个服务。因此，构建系统会将模态控制器和相关内容打包到主包中。

PS：另外，我把 AlertController 和 ActionSheetController 放在那里。

推荐阅读