I can’t help on that one, except creating pages with the CLI I have created the rest manually
Isnt lazy loading only enabled with loadChildren (or sonethibg similar) in route definition? With a string literal pointing to the module and classname?
Or a bit more blunt: no lazy loading in any of the code examples above
Yeah, unfortunately @Tommertom seems to be correct. I’ve tested a couple of ways now, and while @reedrichards code does mean the code is not duplicated, it’s not lazy loaded. So, for bundle size it’s good… but it’s not lazy loaded…
I have a lazy loaded profile page… and from it I wanted a button to create a modal containing the content from another page… So… I have a profilePage, a ModalComponent, and a ModalContentPage… all 3 have modules… In the profilePage I imported the ModalComponent.module file, and in the ModalComponent.module file I imported the ModalContentPage.module file… and of course the rest of the declarations… BUT… when I load the profilePage, both the ModalComponent and the ModalContentPage are loaded immediately… They are not lazy loaded… of course the profilePage is called from a route with loadChildren, and there doesn’t seem to be any way to lazy load the ModalComponent or ModalContentPage…
super interesting, thx for the feedback @bgies
can’t try right now but definitely will have then a deeper look soonish
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
loadChildrenfollowed 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 
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… 
Do you have a github demo with your code for Ionic 4 ? 
No, sorry. And I’m not really sure what we were discussing 6 months ago is still even valid. 
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 
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.
- Create a standard Ionic page (this will be the modal page)
- Modify the new modal page module.ts
- Import this module.ts on pages that will display the modal.
-
Create modal page: ionic generate page my-modal
-
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 { }
- 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
]
but that’s not lazy loaded