Ionic 4 Lazy Loading and Modals

how did you test @bgies?

I have added a console.log('I am maybe lazy loaded'); to the constructor of my modals and could confirm that I only saw the output in the console when the modal was effectively called

This for both cases, where the modal is called from a page or in the case where a modal is called from a component which is use in a page

In all cases, my modals do seem to be lazy loaded

angular.io on lazy loading

Notice that the lazy loading syntax uses loadChildren followed by a string that is the path to the module, a hash mark or # , and the module’s class name.

I am too lazy to load the url here :stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye:

Ps. Not sure if the constructor test is valid proof for lazy loading. Should test with eager code too

I would be happy to test more, just not sure I understand what you mean there, have you got a sample or something? Thx in advance for the help

Hi. I need to correct myself.

The calling code for modals (ModalController) only allows reference to classes, not strings. So no lazy loading option here as per my earlier post.

Out of the docs from Angular it seems that the lazy loading feature is linked to the router features. Meaning that components to be used lazy loaded in the modalcontroller.create method, have to be part of the feature module which is completely lazy loaded using the loadChildren reference (not component) when defining the path.

So the test would be to make a simple app with a page contained in a module that contains a modal, defining two different routes, one lazy and one eagerly loaded.

Going to try that one…and if works, publish

1 Like

Hi

I think Lazy Loading Angular Modules. In this article we’re going to see how… | by Michele Stieven | Medium

explains it fairly well, including the test to see if lazy loading worked:

For truth’s sake, we can open the browser inspector and go to the Network tab: you’ll see that once you navigate to the lazy route, a new chunk.js file will be loaded asynchronously: that’s our LazyModule in action .

Then the modal is just part of the feature module being lazy loaded (or not).

Having a modal code lazy loaded upon creating still does not seem possible as the API does not seem to allow for it and/or provides a switch.

(after fiddling around with code for a while)

2 Likes

This is what clued me in to the fact that the modalComponent and modalContentPage was not being lazy loaded.

It was kind of a happy accident… I have two modals in my app that need to be called from many places, yet won’t be used very often, so after I build the login modal, I started building the other one, and copying and pasting the code created an error in the modalContent page…

So, my profilePage (which is lazy loaded using a Route and loadChildren) is properly lazy loaded… but as soon as I clicked on the tab which loads that page, I got an error in the modalContent page, which if either the modalComponent OR the modalContentPage was lazy loaded, the error would not have occurred at that point.

I’ve left the error in the page for now, because it’s kind of handy to get the error, instead of having to search through 50 network requests trying to find out what was loaded or not loaded… That’s the worst part of using the Angular routing, the network tab of the Web Developer tools is almost useless now… there are just too many requests to find anything for normal debugging (at least for me).

2 Likes

@Tommertom thx for the sharing these info, had a try, I could confirm, chunk is not loaded when I open the modal

Hi, i’ve tried to follow your guide to convert my Ionic 3 app where i open some page using modals…
But… :scream:

Do you have a github demo with your code for Ionic 4 ? :beer::beer:

No, sorry. And I’m not really sure what we were discussing 6 months ago is still even valid. :wink: So you’ve been following the migration doc but have an issue with something? Looks like they also have a v4 Migration Services support package of some sort now. I can say that I’m happy we’re using v4 now. It’s a big update but worth the trouble in my opinion.

What are you caught on?

This morning i solved… reading better this thread :slight_smile:
Thanks

1 Like

I found it difficult to navigate all these notes and other threads so chiming in with my simplified two cents. I “think” btsiders (above) got this right and I’m just simplifying those notes for my use case.

  1. Create a standard Ionic page (this will be the modal page)
  2. Modify the new modal page module.ts
  3. Import this module.ts on pages that will display the modal.

  1. Create modal page: ionic generate page my-modal

  2. Modify the modal page module.ts as follows i.e. remove router and add entryComponents:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
//import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MyModalPage } from './my-modal.page';

/*
const routes: Routes = [
    {
        path: '',
        component: MyModalPage
    }
];
*/

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        //RouterModule.forChild(routes),
    ],
    declarations: [MyModalPage],
    entryComponents: [MyModalPage]
})
export class MyModalPageModule { }
  1. Import the module.ts on page that will display the modal:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MyPage } from './my-page.page';

import { MyModalModule } from '../my-modal.module';

const routes: Routes = [
    {
        path: '',
        component: MyPage
    }
];

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes),
        MyModalModule
    ],
    declarations: [MyPage]
})
export class MyPageModule { }
4 Likes

In Ionic 4 the modal isn’t behaving as expected. It’s appearing for a few seconds when the app loads then goes away. and if I hit the back button it goes back to the modal.

thanks @valentim for summerizing.

Unfortunately, that doesn’t work for me. In my case, the parent page (page which should show the modal) does not finish loading

Additionally to the recommended steps, I also removed the path from app-routing.module.ts

I could only resolve it by adding the page which is shown as modal by adding its module to the global app.module.ts

Thanks a lot. It works. i.e.

entryComponents: [
MyModal
]

:grinning:

but that’s not lazy loaded

So at the end this thread never solve and given correct example how to LAZY LOADING modal.

So basically it is not working, even not the way they show in the official docs.
Looks like we have to forget about lazy loading a modal…too bad.

After I have tried, the modal unable to independently lazy load. It has to tie with other modules to lazy load.

e.g. app-routing.module.ts

 const routes: Routes = [
   {
    path: 'MyPage', 
    loadChildren: () => import('../my/my.module').then( m => m.MyModule)
   }
 ];
 
 @NgModule({
   imports: [
     RouterModule.forRoot(
       routes,
       { preloadingStrategy: PreloadAllModules}
     )],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

e.g. MyModule.ts <- lazy module

@NgModule({
     declarations: [MyPage],
     imports: [
         RouterModule.forChild([{ path: '', component: MyPage }]),
         MeProfileModalPageModule <-- this modal has to lazy load with other module
     ],
     exports:[
         MyPage
     ]
   })
   export class MyModule { }

And the MeProfileModalPageModule have to remove all the route from Angular.

e.g. MeProfileModalPageModule <- unable lazy module

@NgModule({
    declarations: [MeProfileModalPage],
    imports: [
    ],
    exports: [
        MeProfileModalPage
    ]
  })
  export class MeProfileModalPageModule { }
1 Like