Ionic/Angular modal gets lazy loaded

Question

With any Ionic modal with angular, there is some code that gets lazy loaded.

Take the toast example. When you click on the "pair" button, three javascript files (see screenshot below) get loaded. The second time you click "pair", no additional file gets loaded.

This is problematic for me because I want to show a toast when internet connectivity issue is detected, so the code for the toast needs to be entirely preloaded. I can't figure out how to do this. Given that angular's lazy loading is route based, I don't understand how the toast can even have lazy-loaded code to begin with.

EDIT: I understand showing a hidden toast would solve the problem in a hacky way, but I'm interested specifically in how the lazy loading system works

Answer 1

Solution 1 What you can make it preloaded is to give a user a toast when the angular loads all the file so that it also loads the toast related files.

Like the toast can the

"Loading..."

"Connection is Good/Ok"

So this way the toast files load at the start and when their is weak network you can toast a message a and it works as the files are preloaded.

Solution 2

You can toast a hidden styled toast like a transparent toast so that it is not visible and for that toast the files are loaded at the first time.

Solution 3

You can add these files link into the index.html file as preload strategy so that the files are loaded even if they are not used and set a cache policy so that even if the network is bad one time previously cached files get into work and you can toast a message to the user without the internet.

Answer 2

Assuming you're building a mobile app here:

This is problematic for me because I want to show a toast when internet connectivity issue is detected,

I think you're trying to solve the wrong problem. You should not need to worry about the lazy loading aspect, instead you should make sure all the files are available inside the app bundle!

I don't understand how the toast can even have lazy-loaded code to begin with.

That is easy to explain. The code that actually renders the component in the screen, that decides the position, size, colour, font, duration etc.. that doesn't need to be in the core modules so it's only loaded when you try to use it for the first time. All that has to be loaded is the instruction confirming that component exists and how to fetch it.

This is problematic for me because I want to show a toast when internet connectivity issue is detected, so the code for the toast needs to be entirely preloaded.

This is not entirely true. It needs to be available, not pre-loaded. I think this question can be resolved if you can work out why your files are being loaded from a remote server (like in the example you posted in your question).

To Illustrate, I've just created a brand new ionic app and executed it:

ionic start myapp tabs
ionic serve

I've changed my tab1.page.ts to include the ion-toast code and a click event on one of the links generated by the example:

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>

Look at the screenshot below. My internet is off, and i can still lazy load the toast scripts because they're all in the available bundle I'm running. In a mobile app they should be bundled within your application instead of loaded remotely (opposed to what happens in their website).

Now IF you're running this on a webpage instead of in an app, you'll need to use one of the solutions presented in the other answers. I couldn't find out a decent way of injecting the toast scripts, so if I had to do it I would present an invisible toast while my app was loading, below the screen so it would be invisible.