对于任何带角度的 Ionic 模态，都会有一些代码会延迟加载。
以toast 为例。当您单击“配对”按钮时，将加载三个 javascript 文件（见下面的屏幕截图）。第二次单击“配对”时，不会加载其他文件。
这对我来说是个问题，因为我想在检测到互联网连接问题时显示 toast，因此需要完全预加载 toast 的代码。我不知道该怎么做。鉴于 Angular 的延迟加载是基于路由的，我不明白 toast 甚至可以从延迟加载代码开始。
编辑：我知道显示隐藏的 toast 会以一种 hacky 的方式解决问题，但我对延迟加载系统的工作原理特别感兴趣
【问题讨论】：
标签： angular ionic-framework ionic4
解决方案 1 您可以使其预加载的是在 Angular 加载所有文件时给用户一个 toast，以便它也加载与 toast 相关的文件。
像吐司一样
“正在加载...”
“连接良好/正常”
因此，toast 文件在开始时加载，当它们的网络较弱时，您可以发送一条消息 a，它会在文件预加载时工作。
解决方案 2
您可以像透明吐司一样吐司隐藏样式的吐司，使其不可见，并且对于吐司，文件在第一次加载。
解决方案 3
您可以将这些文件链接添加到 index.html 文件中作为预加载策略，以便即使文件未使用也会加载这些文件，并设置缓存策略，以便即使网络不好，以前缓存的文件也会进入工作，您可以在没有互联网的情况下向用户敬酒。
【讨论】：
假设您在这里构建一个移动应用程序：
这对我来说是个问题，因为我想在 检测到互联网连接问题，
我认为您正在尝试解决错误的问题。您无需担心延迟加载方面，而是应确保应用程序包中的所有文件都可用！
我不明白 toast 怎么会有延迟加载的代码 开始。
这很容易解释。实际在屏幕中呈现组件的代码，它决定位置、大小、颜色、字体、持续时间等。不需要在核心模块中，因此仅在您第一次尝试使用它时才会加载时间。只需加载确认组件存在以及如何获取它的指令。
这对我来说是个问题，因为我想在 检测到互联网连接问题，因此吐司的代码 需要完全预加载。
这并不完全正确。它需要可用，而不是预加载。我认为如果你能弄清楚为什么你的文件是从远程服务器加载的（就像你在问题中发布的示例一样），我认为这个问题可以得到解决。
为了说明，我刚刚创建了一个全新的 ionic 应用程序并执行了它：
ionic start myapp tabs
ionic serve
我已更改我的 tab1.page.ts 以在示例生成的链接之一上包含 ion-toast 代码和点击事件：
Tab1.page.ts：
import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';
@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor(public toastController: ToastController) {}
doIt() {
console.log('done it');
this.presentToast();
}
async presentToast() {
const toast = await this.toastController.create({
message: 'Your settings have been saved.',
duration: 2000
});
toast.present();
}
}
Tab1.page.html：
<ion-item (click)="doIt()">
<ion-icon slot="start" color="medium" name="book"></ion-icon>
<ion-label>Ionic Documentation</ion-label>
</ion-item>
请看下面的截图。我的互联网已关闭，我仍然可以延迟加载 toast 脚本，因为它们都在我正在运行的可用包中。在移动应用程序中，它们应该捆绑在您的应用程序中，而不是远程加载（与他们网站上发生的情况相反）。
现在，如果您在网页上而不是在应用程序中运行此程序，则需要使用其他答案中提供的解决方案之一。我找不到注入 toast 脚本的好方法，所以如果我不得不这样做，我会在我的应用程序加载时在屏幕下方显示一个不可见的 toast，因此它是不可见的。
【讨论】：