Here’s a sample pipes module from the angular 2 moment lib
1 Like
Can you share some code? How are you handling things? is myPageName lazy loaded?
@mhartington awesome! thx 
@mhartington Problem seems to be solved after ionic serve reboot and page refresh. Sorry for inconvenience
Very close. You just need to add exports: [FormatCurrencyPipe].
So close and so faraway in the same time
Thx a lot for the feedback!
I’m curious as to why you settled on this instead of module-per-component. Also, is it true that there is no way to avoid code duplication in the case where both PageA and PageB import ComponentsModule? What I am currently seeing is all component code in the [n].main.js for every page that imports said component. I’m wondering if that’s just an unavoidable fact of life or if there is something still wrong with my project setup.
just migrated to 3.0 beta. Now im getting this error. the virtualscroll does not work anymore.
TypeError: Cannot read property ‘top’ of undefined
at updateDimensions (http://localhost:8109/build/main.js:146000:18)
at http://localhost:8109/build/main.js:85260:111
I’ve been reading both this thread and the conversation around @rlouie’s blog post, and I still don’t understand whether this is something I can make use of. I’m hoping someone can comment, because I think I have a fairly common use case.
My app relies on Redux structure (ngrx/store). Pages do computations, sometimes communicating with global providers (example: database service). Those pages contain components (which in turn contain subcomponents) that render information, collect inputs, and emit those inputs upward to the page. OnPush change detection strategy used throughout. What would be the most efficient way to set up modules, and to move to Ionic 3 in general?
I appreciate any insight you could provide. Thanks.
So if I understand correctly what you wrote, it means that when PageA is loaded, all ComponentsModule are loaded too.
Then, when PageB gonna be loaded, all ComponentsModule gonna be loaded another times? Or the lazy loader is enough clever to notice that he already loaded them before?
Also, I’ve got another question, if someone would like to help… I’ve got pipes, which are use in pages and in components…what should I do, should the ComponentsModule import the PipesModule or should I move these pipes in the ComponentsModule or another solution?
I want to be clear that I cannot speak definitively about this, but my understanding is that ComponentsModule gets included in both PageA and PageB modules. No, the lazy loader does not seem to be sufficiently clever about this, and as a result, I am not particularly stoked about that.
To reiterate, this absolutely might be my fault, and other people might not have this problem.
Thx for your answer. I’ve got 31 pages and I use components in 23 of them. If what you sees is correct, means I gonna load 23 times all my (something like 50) components? I hope it’s not the case 
All I can suggest at the moment is to inspect the [n].main.js files under www/build. See if there is duplicated code.
@mhartington I’m ending up creating more than one components module (I’ve something like 50 components, only need a couple of them at boot time).
However, this solution is “against” what you described here above, respectively “one module that imports all component classes, no individual modules for each component”.
Just to be sure, what you described here is the “out of the box / best practice / simplest approach” you would suggest but having multiple components modules is allowed/supported now and will be in the future?
Thx in advance for your, I hope, acknowledgment
@rapropos yep since I splited my modules I see a little bit clearer and same effect, I see duplicated code too. But not just my code, for example I see lodash and hammer.js in 0.main.js and 1.main.js
But I ran that inspection on the not aot build (after ionic serve)
Update note: seems that each duplicated code is indexed with an hexadecimal number, like my-class.ts?f9bb … maybe on the aot build or angular lazy load, this index is used to indicate that the code doesn’t have to be loaded in memory again?
I thought you might appreciate some feedback on v3 beta
First, Big thanks to Ionic team for all the work.
Our app consists of about 20 pages and 7 services, uses Bluetooth and Native maps on Android, but is also used as a browser app which lazy loads Javascript maps and does not use Bluetooth. Both Bluetooth and Maps are provided to components via singleton services.
The smallest application code size and the best result for android app boot time on reference phone right now is about 1140k of js code which boots in 5 secs. This is using Angular4, ionic 2.3, rollup bundler and closure as minifier (simple optimizations only). Angular 4 really improved treeshaking. Shims are not separate but imported and compiled with the app.
It takes about 2 seconds for the app to display index.html and another 3 seconds to display first ionic page. We are not using splashcreen, but instead display index.html content while the app is loading -at least for android and browser.
Previous benchmarks were: 1460k package with 6.5 sec boot time with ionic 2.3 angular 2.4, rollup and closure. Using webpack added about 130 k to the app size and some boot time.
Moving to v3 beta
We setup following: two entry pages are eager loaded, the rest are lazy loaded. As far as functionality goes, there are no issues.
The package size in beta3 is 1050k in main.js and about 350k in lazy loaded pages using webpack bundler. We can not use rollup because of lazy loading. Android app boots in about 7 secs. Could be better.
So what would be the best use case for us?
We would like to package couple of services that are not needed on startup (Bluetooth and Maps) together with dependent components into separate modules and lazy load them. With agressive treeshaking we could maybe move 300 to 400k of code from main.js script into lazy loaded modules, and improve boot time by another second.
We tried the Angular way as descibed by @rloui and faced same difficulties.
Hopefully we can improve on this issues in the following beta releases.
this is mostly related to some regressions in 2.3, which 3.0 has.
That doesn’t sound right. I will look into it. Can you give me some steps to reproduce or a sample repo?
Thanks,
Dan
Redux is an application level provider or event manager if you will, so put it on the src/app/app.module.ts file.
Yes, you absolutely could make use of Ionic 3. It works very well with the structure you’re describing.
Thanks,
Dan