Ionic-framework: LAZY LOADING in IONIC2

[mohammedzamakhan]

Short description of the problem:

Angular Router (Angular 2) has the ability to lazy load components, since Ionic is using its own router, will we have the functionality to lazy load the components?

What behavior are you expecting?

Lazy Loading Components

[jgw96]

Hello, thanks for opening an issue with us! Lazy loading is something that we are researching at the moment but from our current tests/thoughts we are not totally convinced that lazy loading of components gives a major boost to performance. I will leave this issue open as a feature as it is something that we want to research. Thanks!

[mohammedzamakhan]

For a large scale web app, which has 100s of routes, if we do not lazy load, the initial load time would be a lot, because you have to load all the js at the beginning.

[comfortme]

at least lazy loading images like ion-img does in virtual lists would be good.

[05bca054]

+1

[anrip]

+1

[compitDanielos]

We have large app with many modules.
Main problem was to deal with BrowserModule loaded twice.
Once you use lazy loading, you should load this in main NgModel, than in other modules just add CommonModule.

BrowserModule was loaded twice beacose of Ionic imports this in IonicModule.

Workaround I found is in ionic-angular/module.js line ~101
Change

imports: [BrowserModule, HttpModule, FormsModule, ReactiveFormsModule], exports: [BrowserModule, HttpModule, FormsModule, ReactiveFormsModule, IONIC_DIRECTIVES]
to
imports: [CommonModule, HttpModule, FormsModule, ReactiveFormsModule], exports: [CommonModule, HttpModule, FormsModule, ReactiveFormsModule, IONIC_DIRECTIVES]

And add import
import { CommonModule } from "@angular/common";

[cleever]

@comfortme you can use this library to lazy load images:

https://github.com/NathanWalker/ng2-image-lazy-load

[todrules]

I'd like to see this implemented as well. I'm building an app that while may not have a lot of modules, the modules that it does have could affect performance if all were loaded on app init.

For example, let's say the app has Facebook, Twitter, Google+, LinkedIn, and Slack modules, but the user only uses Facebook. Then why load the others? Maybe there's a config option I'm missing that can dynamically load modules during bootstrap based on env/system/user settings and configurations, but I couldn't find anything.

Any feature updates or workarounds would be greatly appreciated.

[todrules]

To answer my own post, I did get lazy loading working for Ionic using Webpack 2. I also have HMR and AOT working, as well, so it is possible with a little trial and error. I'm also using Angular's router in my Ionic apps, so I'm not sure how this would be done with the Ionic NavController, but it's pretty easy to switch out, and even the syntax is almost identical.

The main issue that I ran across is that IonicModule imports BrowserModule from Angular, so when you try to import Ionic into the lazy-loaded module, it fails. You can only import BrowserModule once.

The solution I finally got to work was to replace BrowserModule with CommonModule in my local Ionic build. It's actually pretty easy. There's just 3 spots in module.ts/js that need to be replaced. Finally, make sure your AppModule imports BrowserModule, then Ionic can be imported multiple times in your app, permitting lazy loading.

[emmawi]

@todrules so basically you have to include Ionic again in every module you lazyload? Does this slow things down?

[todrules]

It doesn't slow it down at all. Ionic is already in memory. You're just importing it into the new module just like you would do with CommonModule or FormsModule.

[alexthebuilder]

@todrules Do you have an example of your lazy loading working any where? I'm working on a pretty big application that will be web and mobile based and would love to be able to lazy load multiple modules after the application has initialized.

[evgeniynet]

I am interesting too, please give an example or tutorial :)

[hoisel]

@todrules, +1.

[alexthebuilder]

Just a follow up. I got an example working with lazy loading. Since Lazy loading does not work with AOT at the moment there is no real win with this. Right now I am more interested in getting Angular Universal working with Ionic. Once AOT works with lazy loading I think it may be worth another look. Mainly for a separate build process for PWA.

[alwayrun]

+1

[ivaylopivanov]

3 months later, do we have any update on this?

[mohammedzamakhan]

I am looking forward to use Ionic to build Progressive Web App, but this one feature is a big blocker for me, I want to see lazy loading in Ionic Applications :(

[Dutchboy]

@todrules and @compitDanielos About your solutions.... As soon as I've activated the router and commented-out all the nav-controller and
.... the mini app works again.....

BUT

The ion-content missed some fixed-margins .... How did you both set the thing up??

Thanks!!!!!

[compitDanielos]

@Dutchboy my solution was, to retrieve relevant styling from ionic package, and import it in my project.

[Dutchboy]

@CompitDanielos ... Thanks very much for replying! The reason I'm asking, it too get it working, but ion-content gets hidden behind the ion-header - what did you do to avoid this?.... Thanks so much for your help! (I've been searching for a solution for a few days now)

[emmawi]

So I changed my whole ionic project and now I have built an angular 2 app with the router to be able to loadchildren. I changed BrowserModule to CommonModule. When trying to present something (modal, actionsheet, alert) I get TypeError: Cannot read property _getPortal of undefined. So I looked in to Ionics code and there is an error here: var portal = this._appRoot._getPortal(appPortal); Anyone has idea how to fix this? I guess the approot isn't declared since i don't use ion-nav.

[Dutchboy]

@emmawi That problem I had / have too... My humble opinion is that the Nav / NavController is made way toooo important by Ionic, which will ultimately make the whole Ionic framework unworkable... Ionic is just a presentation-layer - a (near) perfect one, I'm not judging, but not more. I frustrated myself with this, trying to dig into someone else's source code (which is massive, and again, no opinion nor judgement!) losing a week or more, I came across other approaches.

Also, the whole hybrid approach makes me more and more skeptical. Especially when I can't split my code into several "modules". When a user decides to leave the app, simply taking a phone call or answers some whatsapp messages and later on wants to come back to my app, he/she for sure will find out the whole application has been removed from memory by the OS (android/ios), simply because I couldn't make it small? Because I cannot develop it into several separate modules - with one module small enough to be allowed alive by the OS, which keeps important data and notifications in-memory.

Think lazy loading. The whole presentation layer doesn't have to in memory when running in the background (taking for granted the root module, which is (can be) just an empty placeholder.

Back to my growing fear with regards to Hybrid. Even though I have had some mixed experience with Telerik, the founders of Nativescript, I was (and still am) surprised to see someone I value a lot, Nathan Walker @NathanWalker , providing a working seed...

Hmmmm... I now realize I wrote this monologue in the Ionic section... I also realize nobody asked for it really... But, on the other hand, if someone told me about his endeavors before, it would have saved me a lot of time. @NathanWalker provides a huge amount of links to others explaining loads of stuff. Go there and ultimately, you might agree with me.

[ivaylopivanov]

@emmawi @Dutchboy I was struggling a lot as you guys, so I decided to use another framework. I moved to Onsen UI which shows better performances on both iOS and Android. Also, I managed to make it working with lazy loading. It's a bit tricky, but still works perfectly. The example is here.

[alexthebuilder]

@emmawi @Dutchboy @ivaylopivanov Hey guys, note the lazy load branch. https://github.com/driftyco/ionic/tree/lazy-load . It looks like our concerns on pwa are being noticed and worked on. RC5 was also a step in the right direction on angular-universal as well. It looks like the Ionic team is working towards what we want.

[emmawi]

That is good news. I was actually in the thoughts of ditching ionic all together because of this. The most important thing in my app is being able to lazy load modules.

@jgw96 @danbucholtz
Is there going to be a feature in the ionic framework to lazy load children like in angulars router? And if so, do you have a timeframe on it?

[Dutchboy]

@emmawi @alexthebuilder with what I've done today I'm thinking of ditching Ionic. Look at here This is a fork / cooperation of here - Mico Gechev is a long-time active guy who used to be responisble for the Guidelines of AngularJS (1) .... He knows what he's doing.... But step right to the advanced seed (first link)....

Using this seed, you can then mix it with @ivaylopivanov work to get the web interface up.... or just use the Material2 of Angular....

Because - from what I've learned, you should not skip angular-router.... It is perfect, it comes directly from the ngrx team and these guys are beyond perfect.

[Dutchboy]

@emmawi I see you've tried to reach some guys - don't worry, they will not respond how you hope them to. Please realize that Ionic has tried to build a Nav/NavController system with a team which is not comparable to the team of Angular2. And they should never have done this - crossing the line outside the presentation layer....

[danbucholtz]

This feature is coming to Ionic shortly. Probably post 2.0. We have a working prototype. With that in mind, we are going to close this issue and focus on the implementation.

Thanks,
Dan

[Dutchboy]

This issue has been open more than 6 months. Even before it, several people hoped it would have been solved when Angular team adopted wisely the ngrx/router ... The problem is that the NavController is a pain... Another problem is that the Ionic Team doesn't listen... An answer I read a lot - it will be implemented and so now we're closing it.. "Post-V2" meaning V3? Or "in due time"? V4? September? 2018?

[mikezks]

via driftyco/ionic-app-scripts/issues/623

We will have to more to share on this soon. Tracking the topic here.
driftyco/ionic-app-scripts#693
Thanks,
Dan

let's see whether this may bring lazy loading support for components...

[bobrosoft]

Our team is waiting for that solution as well .. with all the optimizations we achieved only 1.7MB of minified JS which takes 3.2sec (on desktop) to evaluate after loading and only code-splitting could help there.

[Dutchboy]

@rodelima
It is so simple to just copy-paste a link to a completely different subject... It both shows disrespect for all the people here which actually took the effort to explain and it also shows you really don't have a clue of what we're discussing here.

Pictures / Images being "lazy loaded" - this has nothing to do with program code being lazy loaded and being run afterwards...

The discussion here is the choice of the Ionic Team to develop their own mechanism, NavController.
They did this in May '16. Or before.

Simply, because they didn't want to wait for the solution being cooked by the humongous team of Angular2.

The question should be - Why Did The NG2 Team Wait So Long.

Because they wanted a superior mechanism?
Because they learned from their previous mistake (resulting in an external angularUIrouter)?

In May '16, some members of the NG2 Team got separated from the core team and did a wonderful job bringing Redux into the NG2 Space. This is called NGRX.
And guess what happened.... The NGRX-Router got promoted, got removed from the NGRX repository, and got renamed NG2 Router.

With NG2 still in RC - these things happen quickly.

Meanwhile, the Ionic Team thickheadedly held on to their "implementation" of NavController. Tried to patch it etc...

But with that, one huge mistake and misinterpretation is unveiled.

Even though Ionic is a good effort - it still is "just" a User Interface Layer

And with brute-forcing us, the developers, to use a faulty NavController, we, the developers, will never be able to fully accomplish our targets - to successfully finalize a working Application.

We are forced to tell our users
"hey, you, listen, wait for 10 seconds until your application is started"
"hey, you, don't complain"
..... Every time the user brings back our application....
..... After reading a Whatsapp message, bangggg 10 seconds....
(because some Android phones have strict memory garbage collection mechanisms in place)

While, at the same time, NG2 with code-split allows to keep just a tiny block in-memory so that even the most rigorous GC mechanisms allow these tiny codes in-memory.

THIS Lazy Loading we are discussing here.....! And not just some silly image async refresh, which erratically was called "lazy loading" too by the Ionic Team....

My advise is:-
Get Rid Of NavController!!!!! Not tomorrow, not in a month, not "next version" - BUT YESTERDAY

[rodelima]

@Dutchboy
OK. Sorry. My mistake. I got it wrong. Thank you for the explanation

[mikezks]

@rodelima
no problem - really. 😄
don't take this too serious. we are all awaiting this feature, but @Dutchboy seems to be a little bit too frustrated IMO.

[Dutchboy]

@mikezks
It is actually hard to get me frustrated. But...
... If an issue is obviously An Issue for more than a few months.
... When that same issue has been tackled by the original framework itself (NG2 Team and their kings at NGRX)
... And I then see a cooperative trace of messages (read all the above) without annnnny Ionic Team member picking it up

And then being utterly surprised to see this issue closed by @danbucholtz - who, until then hasn't shared one helping suggestion, and just closes it with "Don't worry, soon"...

Well, @mikezks :-) yes, I sometimes lose myself and start typing the whole history of such issue...

• Ionic being a UX layer framework (until V1 at least, by far the best in its own right)
• Ionic overplaying itself by forcing developers to abandon NG2 Router, which, does allow AoT and LL
• Ionic not listening to (mostly) free customers, developers... Mind you, people start abandon it as we speak (uhhh - write :-) ) See the statistics - see the growth of Nativescript

Ionic should abandon NavController yesterday.

[mikezks]

@Dutchboy
i agree with you in most of the points, nevertheless the tone is to harsh IMO. ionic is still OSS we all benefit of and i am sure ionic team does their best to provide a good framework.

but i understand your frustration, because i have a similar issue with Microsoft Azure Functions were no progress happens and no schedule is known.

also closing this issue w/o a solution is kind of odd.
i would need Lazy Loading and Angular Universal support urgently as well, but it seems we have to wait a little bit longer, but i hope 2.1 or 2.2 will include these features.

until that, all the best & keep the faith. 😉

[jvitor83]

I agree with @Dutchboy, I think ionic 2 should be a UX layer as well, by creating components and behaviors that is focused (but not only) to mobile (touch, gestures, etc). But this (UX) should be created using the same ecosystem as angular2 (even the router). This benefits both communities (ionic and angular), instead of splitting by using a different router (navcontroller).
Anyway, if ionic2 keep the navcontroller, it should be allowed (even if not recommended) to use the angular2 router (even if some features not work).
This could allow the ionic2 to be a starter project for web only projects (with mobile friendly features).

I've been working on this myself https://github.com/jvitor83/angular-ionic-seed but am suffering the same issue that was quoted here

[jthoms1]

Sorry I just wanted to chime in. We are actively working on this. Your concerns about bundle size and lazy loading routes are the same concerns that we have been discussing internally. There currently is no simple solution.

Your frustrations are understood.

I know that you might have heard this before but I can tell you that this is our top priority.

[mikezks]

@jthoms1, great thx for this update!

[Dutchboy]

@jthoms1 I know where you're coming from... The Ionic Team pushed extremely on the benefits of and use of NavController, while being blind for simply that it isn't the magical solution...

During the period April - July it seemed, but..... As the NG2 Team also realized, it's not that simple...
Then, later-on, with NG2-Router appearing, from July onwards, your team, The Ionic Team, went numb. At first you all didn't want to believe it... NG2 came up with AoT (oh, first, with NgModule in their last RC) with all its benefits and of course(, and I do acknowledge!!) limitations on HOW to get "it" right (AoT), which still is cumbersome....

So, yes, even though I understand your struggles, I do believe you (The Ionic Team) should NEVER try to get OFF the path of being a UX Layer - nothing wrong with that!!! You're perfect at it, even the best most people might say....

Why I have such a strong opinion?... Well, I've lost a tremendous amount of time on "promising" technologies (Telerik ORM, I have forgotten their name for it... Luckily... Microsofts technologies ASP.net or their ORM implementations - horrible)... I've invested months on these, right to the waste bin... And I really see your team is losing (free) customers (developers) choosing for Nativescript (Telerik!!) now....

I understand your business model.... 99% free... Getting paid by the 1%... or 80%-20%... I can't look in your kitchen... But an investor putting a seed of 10 million is not stupid.... A well thought model, which obviously works!! For you as a company AND for the community as a whole....

Having said this, and please see it this way, because this is exactly how I mean it!!! :-) Please!! FOCUS on the UX handling - get rid of the NavController religion... And concur Onsen. Not tomorrow, but today.

A little side note - I'm not a deep developer, even though I'm now 46 and "on a computer from my 8th" (Sinclair XZ81).... I'm definitely technical, but more an entrepreneur / strategy planner, who's now building a new social network, having to learn all new languages, Docker, Vertx, NG2, Redis etc... I kept myself alive being an Oracle expert :-D not paying taxes when I earned loads.... etc....

And yes, I learned the hard way not ever want to have server-side tech (ASP.net nor PHP) taking care a 10.000s "clients"... Servers are to serve - not more, not less... Files - not sessions... :-)

Okay, enough said.....

REMOVE NavController!!! - it is outside your scope

ps. thnx @jvitor83 @ivaylopivanov @bobrosoft for your support and of course @mohammedzamakhan for opening this issue!!!

[danbucholtz]

@Dutchboy,

Your comments are completely inappropriate and there is no place for that sort of disrespect here. Please review our code of conduct before posting in our Github organization again. We take this matter very seriously. This is a friendly, collaborative place for all parties and throwing around insults is unacceptable.

Don't like the NavController? Don't use it 😸. There isn't anything preventing developers from using the Angular Router if they so choose. I can assure you - using the NG Router will not fix the size problems right now. I have added the IonicModule to the Angular CLI numerous times to test various things out. The same problems exist. Feel free to do the same if you'd rather use the router.

We don't use the NG Router because we have different use cases. We designed our deep linking and NavController system to match how iOS and Android apps navigate. For example, imagine you navigate to a page of the app. You scroll half-way down. Then you navigate to a different page, and then return. With our navigation system, you'll return to the same scroll position since that's how apps work. With the Angular router, you will return to the top of the page. That's one of many examples. We did not build this in a silo - we meet with Misko and the Angular team very regularly. They understand and support our design decision here.

Thanks,
Dan

[danbucholtz]

All,

We are working on the problem. We are well aware it exists. We will have a solution available as soon as it's ready. This is our primary focus and something we know we need to have available ASAP.

This is not a problem that is exclusive to Ionic. Every Angular project has the same problems right now. We see it more because we are a large project built on top of Angular. Angular apps are huge right now. We We are working closely with the Angular team to resolve the issues.

We would love to have a schedule or a time table, but the reality is many of the things are out of our hands. We have our own host of problems in Ionic that we have been resolving, but we are also pushing our dependencies to resolve their issues. We worked with the Angular team to change how Angular is packaged for Version 4, so that will help a lot. Ultimately, the problem is that Webpack, Rollup, etc think that the transpiled ES5 code has side effects, and then it cannot remove unused code, resulting in large sizes. So, basically there are a slew of bugs in Webpack and Rollup that are hurting us. Closure Compiler is smart enough to know the side effects don't exist and results in a tiny Ionic app, but it is hard to use Closure Compiler so we're not so sure that's a viable option. Rather than waiting for Rollup and Webpack to fix their issues, we decided with Angular that we are going to take a different approach and bundle everything as ES2015 code. That means we need to wait for Angular to be distributed as ES2015 code. This is not a silver bullet, though. There have been lots of fixes/changes to Angular and Ionic over the past month or two to fix various small problems in the framework that were increasing bundle size. We had a week long meeting in Mountain View with the Angular team to go over everything and experiment on how we can resolve some of the issues the two projects have.

Ultimately, when I say we're working on it, that's exactly what I mean. We haven't added any features to the framework itself in months. We have multiple staff members trying to solve the problems. We are doing exactly what we say we are doing, and we will ship out the solution the day it's ready.

I am going to lock this thread. It's not constructive and distracting.

Thanks,
Dan