In Ionic 3, I was lazy loading the content page for modals using something like this:
login() {
let loginModal = this.modalCtrl.create('LoginPage');
loginModal.onDidDismiss(data => {
console.info('HomePage LoginModal onDidDismiss: ');
});
loginModal.present();
}
My login modal can be called from many places in my app, if the user is not logged in, so it’s something I want to be efficient, and not loaded at all if the user is already logged in.
But after creating an Ionic 4 version of the app (which if anyone says it only takes a few hours, don’t believe them unless your app is less than 4 pages:), I’m struggling a little to figure out the best way to create the login modal, because I really don’t want the content “LoginPage” loaded unless it’s needed, and it seems it has to be imported into every page that might use the login modal…
From the Ionic 4 docs:
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: { value: 123 }
});
return await modal.present();
}
So… if I create a component with no template, and all the component really does is create the login Modal, and imports the “LoginPage” is it actually more efficient, less bandwidth etc. ?
app/components/login-modal/login-modal.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { LoginModalComponent } from './login-modal.component';
@NgModule({
declarations: [
LoginModalComponent,
],
imports: [
CommonModule,
IonicModule.forRoot(),
],
exports: [
LoginModalComponent,
],
entryComponents: [],
})
export class LoginModalComponentModule {}
app/components/login-modal/login-modal.module.ts
If the above is my LoginModal component Module, and I import this module into every page that needs it, won’t the “LoginPage” component be loaded also? I know… only once… but with Ionic 3 it wasn’t loaded unless it was used, and this is big app… we really don’t want to load anything that the user doesn’t need.
So, is there a better way to use lazy loading and modals?
