7

I am new to Ionic and trying to understand how to organize a medium sized application.

Should each Page have its own Module? Or is it better to group similar Pages into the same Module? Is it even possible to do that? It appears the IonicPageModule.forChild() method only accepts one Page:

    IonicPageModule.forChild(AdministerUsersPage)

So is it okay for every single Page to have its own Module? Are there any drawbacks to having this many modules?

It seems like we went from one extreme to the other - no modules where everything is declared in the root context to separate modules for every single Page.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
emulcahy
  • 1,055
  • 3
  • 18
  • 28

1 Answers1

18

Does each Page need its own Module?

The answer to your question would be: Yes and no.


You do need a module per page if you want that page to be lazy-loaded. You can find more information about lazy-loading in Ionic in these two links:

Basically that module will encapsulate everything that the component (your page) needs to function so it can be created when you need it in your app. For example, you could preload some pages that users will use a soon as they open your app, and then keep some other pages to be loaded only if users try to navigate to them. Since you're not loading all the pages when your app is opened, the startup time will be better.

Using modules for each page is also related to deep-linking. You can take a look at the docs to find more information about deep-linking and Ionic, but basically the idea behind the scenes is pretty much the same as with the lazy-loading feature.

Or is it better to group similar Pages into the same Module? Is it even possible to do that?

Afaik that's not possible in Ionic, and of course it's not the recommended way to use it.

So is it okay for every single Page to have its own Module? Are there any drawbacks to having this many modules?

That's correct. Ionic implemented the lazy-loading feature by creating a module per page. One minor drawback would be that you need to create a module for each and every page. So if you have 20+ pages on your app, you'd need to create 20+ modules (but I guess that's not a big issue though, the CLI does all the job for us, right?).

A more important issue would be if you have a ComponentsModule that wraps, let's say, 10 components on it and then you import that ComponentModule on each PageModule. This will create a lot of code duplication (each PageModule will get a different copy of the entire ComponentsModule). One way to fix this issue would be to create a module per component, so that each PageModule can import exactly what it needs.

But still this is not a big issue; the bundle would be a little bit bigger but I guess that a faster startup is one of the most important features of any mobile app.


That being said, you don't need to create a module per page if you don't want to use lazy-loaded pages. Please keep in mind that all your pages and components will be loaded during your app startup, so it will take more time for everything to be ready when users open your app.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134