We have an Angular 12 application which Ionic has been added to. We are using Ionic components within the application such as Modules, Popovers, Toasts, Buttons, Grids etc. The application is a website as well as can be used as a PWA. We are running into an issue with the PWA when it is offline. If in an offline state, clicking on a button that would normally show a popover fails. It is attempting to “Loading Chunk” from localhost:4300.
This is being tested via ionic serve and chrome in an offline state. Is there a way to preload components and their javascripts (which are usually lazy loaded) upon initial load of the application?
Ionic serve out of the box does not enable service worker and other pwa features. It generally runs development mode unless you add relevant flags etc
The angular site has indicators how to test pwa features outside of development mode
Please run lighthouse pwa audit on the testbed to confirm pwa conformity. If not, then your testbed is nok
And the essence of lazy loading is that things are loaded only when needed. A service worker can be configured to eagerly load lazy load chunks in cache - if in pwa mode of course
If you need offline directly after first render online, then likely you need to get rid of lazy loading at all and put all stuff in app.module.ts
@Tommertom how would one go about getting rid of Lazy Loading all together?
Delete every file with “module” in its name aside from app.module.ts, and throw the declarations for all your pages, components, pipes, and service providers into the appropriate stanzas in app.module.ts.
1 Like
@rapropos talk about taking a sledge hammer… ill have to find a different approach as thats not a viable option for my situation
I’m curious - did you do any profiling before you adopted lazy loading in the first place? Personally, I think it was a major mistake on Ionic’s part when they chose to opt everybody into it by default, but in fairness I just decided long ago that the tedious development hassle and fragility of the whole system wasn’t worth whatever performance gains it was promising. At the time I made that decision (several years ago), lazy loading actually made performance worse due to code duplication. I assume they’ve addressed that in the meantime, but I’m still skeptical that it’s worth the hassle for the vast majority of Ionic apps.
thats the hard part for us. Our application was originally created with Angular 5 and has been continuously upgraded to now run Angular 12. So naturally design patterns of Angular have changed over the course of 5 - 12 but as with any application, the overhaul to continuously change to keep up becomes a back seat to new feature requests. So what works in a newly structured out of the box Angular 12 with Ionic is not going to work for us because thats not ultimately what we have. Our app doesnt use Angular routing so all the preloading doesnt work in our situation.
well, maybe then you can configure the service worker to handle something for you? From your original post it seemed also you hadn’t succeeded in testing as real PWA as well, so you are not fully seeing to potential benefit of a working service worker helping you with the offline capabilities.