需要明确的是,我认为这个问题与路由延迟加载完全无关,因为这个问题出现在引导组件中,无法按预期运行。
我有一个离子模式,当没有检测到网络时,它会从基础 app.component 触发。我需要确保离子模式脚本在发送初始有效负载后可用;但是,当我加载应用程序然后在网络调试器选项卡中关闭网络时,它是延迟加载离子模式。
vendor.js:41664 ChunkLoadError: Loading chunk 20 failed.
所引用的脚本在其 webpack 注释中具有以下内容,并且似乎完全是离子模式代码。
./node_modules/@ionic/core/dist/esm/ion-modal.entry.js
如果我触发模式显示然后隐藏,则块会成功加载,并且在网络调试器中触发时以下网络错误模式会按预期工作。当我尝试搜索有关急切加载的文章时,它总是与路由有关,而这不是我在这里寻找的内容。
<ion-modal style="display:none;">
可以与 JIT 编译的模板一起使用以在需要时预加载脚本,但与 AOT 编译的模板一起使用时会失败。因此,目前的解决方案是在引导过程中以编程方式呈现然后关闭模式,或者尽早在 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();
}
相关github问题
modal:any;
async hiddenModal() {
const modal = await this.modalCtrl.create({
component: EditorComponent
});
modal.hidden=true;
modal.onDidDismiss().then(() => {
this.modal=null;
});
await modal.present();
this.modal = modal;
}
async showModal() {
if(this.modal)
this.modal.hidden=false;
else {
const modal = await this.modalCtrl.create({
component: EditorComponent,
});
modal.onDidDismiss().then(() => {
this.modal = null;
});
await modal.present();
this.modal = modal;
}
}