如何在 Angular 10 中急切加载 ion-modal

Question

需要说明的是，我认为这个问题与路由延迟加载根本无关，因为这个问题出现在引导组件中，无法按预期运行。

我有一个离子模式，当未检测到网络时，它会从基地 app.component 触发。我需要确保离子模态脚本在发送初始有效负载后可用；但是，当我加载应用程序然后在网络调试器选项卡中关闭网络时，它是延迟加载离子模式。 vendor.js:41664 ChunkLoadError: Loading chunk 20 failed.

所引用的脚本在其 webpack 注释中包含以下内容，似乎完全是离子模态代码。 ./node_modules/@ionic/core/dist/esm/ion-modal.entry.js

如果我触发显示然后隐藏的模态，则块已成功加载，并且以下网络错误模态在网络调试器中触发时按预期工作。当我尝试搜索有关预加载的文章时，它总是与路由有关，而这正是我在这里寻找的而不是。

Answer 1

结束这个循环。在 ionic v4.x 中，这是不可能的，因为覆盖组件似乎是在运行时注册的。虽然 <ion-modal style="display:none;"> 可以与 JIT 编译的模板一起使用以在需要的地方预加载脚本，但在与 AOT 编译的模板一起使用时会失败。因此，目前的解决方案是在 bootstrap 过程中或在 IonicModule 可用后尽早以编程方式呈现然后关闭模态。

  // Call this somewhere early where IonicModule has been imported, we are doing it in the app.component.ts constructor in our example
  async preloadModal() {
    let tempModal = await this.modalController.create({
      animated: false, // this should prevent it from being visible
      swipeToClose: false, // disable interaction to prevent unexpected behavior
      backdropDismiss: false, // disable interaction to prevent unexpected behavior
      showBackdrop: false, // minimize changes to UI
      keyboardClose: false, // minimize side-effects
      component: MyModalComponent, // Your custom modal component likely won't render, be sure to preload any related assets inside the index.html <head> tags
      componentProps: {
        // your component props, if needed
      }
    });
    await tempModal.present();
    await tempModal.dismiss();
  }

Related github issue

如何在 Angular 10 中急切加载 ion-modal

How to eagerly load ion-modal in Angular 10

angular

ionic-framework

ionic4