Difference between IonicModule and IonicPageModule. Can Lazy loading work in IonicModule?

Ionic Framework ionic-v3
1

Hi all,
I creating a app in ionic2, I notes that lazy loading is applicable only when module contains IonicPageModule where as when I use IonicModule it doesn’t work.
Can anyone explain this concept?

I also like to know that can I creating a two component in page is a right approach?

Thanks

2

IonicModule has the method forRoot --> so this is the base of your ionic app

IonicPageModule is to encapsulate Page in an own module and add the functionality of lazyLoading.
This is the reason why IonicPageModule has only a forChild method.

So imagine this:
You need a Root Module for you app - this is a simple module nothing special and you need to initialize the whole ionic context --> IonicModule.forRoot :wink:

Now you have multiple maybe large pages (similar like routes in angular).
You want to load them via lazy loading to speed up boot time or only load them, when they are accessed.
So you need something to tell your ionic App --> this page needs to be loaded later or when needed.
In this case --> only modules can be lazy loaded, so you wrap that pages in its own modules.
To add the ability to lazy load you have the IonicPageModule.forChild, because the page can be only a child of an existing module :wink:

4 Likes
3

Thanks @bengtler for that wonderful explanation.
Can you also explain me that could one module have two child component?

contact.module.ts
IonicPageModule.forChild(contact1),
IonicPageModule.forChild(contact2)

contact1.ts
console.log(“hi”);

contact2.ts
console.log(“hello”);

Thanks

4

Things may have changed recently, but when I investigated this when lazy loading was first introduced, no it was not possible to have two IonicPageModule.forChild() in the same module.

1 Like