How to lazy load component from a module that declares multiple components?

Ionic Framework ionic-v3
1

I just have a simple module AboutModule that is imported to the main AppModule. This AboutModule declares some components. I tried to lazy load one of them following the official documentation but I am getting the following message.

about.component.ts has a @IonicPage decorator, but it does not have a corresponding “NgModule”

1 Like
2

Although Angular doesn’t, we need to distinguish between components and pages here. For the purpose of this discussion, pages are things that the navigation system interacts with. Components are things that are embedded in pages and other components.
If you’re talking about pages, each of them must have their own module if you want to use the current lazy loader. You can’t group a bunch of them into a single module, AFAIK.
If you’re talking about components, the lazy loader shouldn’t ever get involved, and they should not have @IonicPage decorators. If these components are used in more than one page, you probably should take a very hard look at whether you want to get on the lazy page loading train at all at this point, because their code will get duplicated in every page that uses them.

2 Likes
3

Hello @rapropos,
thanks for your reply. I think this article here http://roblouie.com/article/456/ionic-3s-lazy-loading-is-bad/ covers my question too and it seems that the next release 3.1.0 will resolve probably this issue.

Best
George

4

That would be great, but I’m not holding my breath. There are fundamental issues with webpack’s code splitting that neither ng-cli nor Ionic have yet resolved.

5

Any new about this?

Are you using Lazy Loading for each page or are they loading everything in startup?

How are you dealing with code duplication, in this case, when you need the same component in more than one lazy (page) module?

6

I live with it. The purpose of lazy loading is speed, not compactness. I put each component in its own module, instead of using shared modules. This minimizes code duplication. But I lazy load everything except one page and the global providers, so the app is larger than it would be otherwise, and I’m ok with that.

7

Thank you @AaronSterling, I believe I will follow this same path.