Ionic-framework: Support lazy loaded Modules, not pages

[roblouie]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Currently only "pages" can be lazily loaded, and each page that is lazily loaded requires it's own module. This is really ugly, and seems to dictate that we must use a folder-by-type app structure, which completely goes against how Angular is supposed to be used. Any attempt to lazily load a true module with multiple components and services is met with errors. Trying to lazily load two components that share a module results in: page-two.component.ts has a @IonicPage decorator, but it does not have a corresponding "NgModule", and trying to push a different component from a lazy loaded module onto the nav stack results in Error: No component factory found for SecondPageComponent. Did you add it to @NgModule.entryComponents?

Expected behavior:
A module represents a feature area and can contains any number of components and services. This feature area should live in it's own folder, and the entire module should be able to be either lazily or eagerly loaded. Any services provided in the lazily loaded module should be module scoped and accessible to all components in the module.

Steps to reproduce:
Build a reusable module with multiple components and a service. Attempt to lazily load the module and then navigate between the components that were lazily loaded. This works perfectly in Angular.

For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview

For Ionic 2 issues - http://plnkr.co/edit/z0DzVL?p=preview
-->

Related code:
See an as simple as possible example in vanilla Angular here: https://github.com/roblouie/lazy-loaded-module

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed

[danbucholtz]

@roblouie,

You can do that if you wish. See the ng-module-loader implementation here.

We put a lot of thought into how we wanted to implement lazy loading such that is was easy for the masses. This is what we came up with. I don't see us making any significant changes here at this time. FWIW, I don't view our implementation as very different from the Angular implement. Ours is just simpler, doesn't deal with relative paths or System.import directly. Ours also works out of the box without configuration.

Curious though, I would be interested in seeing an implementation you have of lazy loading a module of components. We support that, but it's not clear how the end-user would accomplish this.

Thanks,
Dan

[ztecharoberts]

@danbucholtz question on large applications and sharing providers. I have north of 20 providers. Generally we share those between 3 or 4 pages that are a part of a wizard flow. Right now I do not see a way to bundle the wizard flow into a module and share a provider with that group.

The other issue I currently have is that if I were to be able to get pages bundled in a module I could not have segments for each individual page or multiple segments to a page. I'd love for the ability to have the option for a bit more control of the ngmodules to add child deepLinks as well as providers for a group. The idea of simple is best is great for small personal projects but once you reach a certain size granularity for sake of performance and maintainability is needed.

[danbucholtz]

@ztecharoberts,

We are listening to the community and are rethinking some of this. Today we shipped Ionic 3 but we did not enable lazy loading by default or talk much about it. Expect to hear more soon.

We are going to facilitate the use case @roblouie talked about. I think that change will satisfy your use case. As for segments and router work, we will probably have to make it more advanced over time. It is pretty basic right now. Nobody is really using it yet (very few projects) so it will be good to get some feedback over the next month or so. We are always listening and will make things better while keeping things simple.

Thanks,
Dan

[iron9light]

@danbucholtz Do you mean the lazy loading feature is not ready for use?
Now I'm following the doc. But things about components/pipes/providers are not clear for me.
No matter it's stable or not, could you guys share a sample project?
Thanks

[ztecharoberts]

@danbucholtz I did want to mention Ionic 2 build --prod was 10mb for our app. After angular 4 it came down to 5mb. With lazy loading right now I am looking at a 1.7mb file size for the base app. It is definitely making a difference. Thanks for working so hard on this for us.

[dorgold]

@danbucholtz are there any updates on that?

We are building quite a large scale Ionic app (>40 pages + ~40 sub components), creating a module for each page just doesn't scale to this size. We can really benefit from splitting our app into a few modules (let say 1 for each tab).

[DavidFrahm]

Also please consider the impact to unit testing in all of this. I don't see that mentioned, and in general it seems Ionic design assumes that people don't write tests :(.

[savanvadalia]

@danbucholtz any plans on adding module lazy loading for multiple components instead of the current implementation which is per page?

I am also following the angular suggested pattern (folder by feature) similar to @roblouie.

It would be great if you can open up the ionic architecture to accommodate this use case.

[MrHOY]

And now, How about adding module lazy loading for multiple components ?

[savanvadalia]

Is ionic-team planning to add this feature or can they atleast guide community with a workaround solution to accommodate this use case if it is possible?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!