Is there a thing/option like preloadModules in v4?
v3:
IonicModule.forRoot(MyApp, {
preloadModules: true
}I haven’t tried this out yet, so if you play around with this please post.
thx for the info…I might when I’ll be over migrating (not tomorrow 
), I’m not sure but I can of have the feeling that the pages works better once their are loaded…but I’m not over with the migration that may explain it too
@AaronSterling thx for the link, it looks like what I was look for
but, I’ve got mixed feeling so far with the solution regarding my app
when I add the global PreloadAllModules strategy for all routes, actually I have the feeling that the modules are loaded too early, it makes my boot time slower I think which is kind of weird because it should not begin to preload before I the app is bootstrapped, but maybe something is wrong in the way I route to the first page?
when I add the strategy only for one route (because I mostly want to speed the loading of one page, the 2nd one in my app) I kind of think it works, because I do see that for example svg containing in the 2nd page are loaded after the 1st page is displayed, but, the components use in the 2nd page seems to be not loaded afterwards but rather loaded in the meantime as the components contained in the 1st
I gonna make some experiment and see how it behave on real phones
P.S:: same piece of codes as the one you linked but with some graphical explanation https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb
loaded at the same time as the page 1 components? There ought to be a way to put this in sequence, like a semicolon in a string of actions. I’ll take a look around.
Yep same time, but maybe it a side effect of my “one module pro page or component” aka each component as its own module
Ok, I won’t be able to try this today, but this is what I want to do.
- Define a PreloadingStrategy that listens to a BehaviorSubject named viewChecked.
- In the first page, the first time ngAfterViewChecked() runs, it fires viewChecked.
- The PreloadingStrategy then begins loading the modules for page 2.
Optional harder “solution” if that doesn’t work:
- Each component of page 1 emits a “ready” flag the first time it hits ngAfterViewChecked().
- The Observable in the PreloadingStrategy fires once all the components have reported they are ready. Then the page 2 modules start loading.
Edit: might be able to get away with ngAfterViewInit() instead of ngAfterViewChecked(), I’m not sure, Also, I’m assuming your page 1 is a login page or similar, where there will be at least a few change detections before transitioning to page 2.
Edit 2: My description of (1) is shorthand for the two pages communicating through a moduleLoadingProvider.
Good idea 
I also just found that post https://medium.com/@adrianfaciu/custom-preloading-strategy-for-angular-modules-b3b5c873681a where the editor add a “delay” option to the loading, that could also be a cheap quick win … gonna have a try
Yeah, I was trying to convert the time delay to something directly connected to life cycle hooks.
Wait wait wait I’m dumb forget everything I said, dumb user here, I forgot to inject it the preloader as provider
Let me retry
@AaronSterling same behavior if I provide correctly…honstely I don’t know maybe I do something wrong
have a look, no preload, I filter the components and see these three
no I preload (without delay or observable) my 2nd page and I do see that one component more is filtered, but it do seems that its loaded in the meantime as the others no?
and now with a forced delay in the preload strategy
1 Like
maybe it’s just me misunderstanding the behavior, it does begin to preload at some point but that might be before the first root page is set, which has the side effect of slowing the boot
if so, then your solution with observable provided above sound like the solution
import {PreloadingStrategy, Route} from '@angular/router';
import {Observable, of} from 'rxjs';
import {Injectable} from '@angular/core';
export interface RouteToPreload {
routePath: string;
route: Route;
load: Function;
}
@Injectable({
providedIn: 'root'
})
export class AppRoutingPreloaderService implements PreloadingStrategy {
private routesToPreload: RouteToPreload[] = [];
constructor() {
}
preload(route: Route, load: Function): Observable<any> {
if (route.data && route.data.preload) {
this.routesToPreload.push({
routePath: route.path,
route: route,
load: load
});
}
return of(null);
}
preloadRoute(path: string): Promise<void> {
return new Promise<void>((resolve) => {
if (this.routesToPreload && this.routesToPreload.length > 0) {
const routeToPreload: RouteToPreload = this.routesToPreload.find((filterRouteToPreload: RouteToPreload) => filterRouteToPreload.routePath === path);
if (routeToPreload) {
routeToPreload.load();
}
}
resolve();
});
}
}
ps.: for a weird reason, using the same provider as preloadingStrategy in app-routing and in a page will as for effect that the provider AppRoutingPreloaderService will be load twice. It isn’t a problem I think because per default the provider preload nothing and the effective preloadRoute just preload the first route find in the array
In the 1st page, I consume the service and call it like
async ionViewDidEnter() {
await this.appRoutingPreloaderService.preloadRoute('my2ndPage');
}
the result looks like the one with a “forced” delay but is less random
cool?
1 Like
I’ve stepped through your code a few times in my mind, and it looks good to me. But that isn’t as good as using it in real life. Also, I’m a bit concerned about the possibility that Ionic 4 routing isn’t the same as Angular routing, even though it is supposed to be. Maybe it really is identical, but there are enough weird things going on still with Nav and NavController that I don’t know whether the Angular routing docs apply to Ionic, once we start doing low-level things like this. But it seems to be working for you, so maybe everything is fine!
If you get weird behavior, one thing to verify is whether the behavior is still weird in a pure Angular single page app. But here’s hoping you solved this!
1 Like
Thank for the feedback. I gonna use the strategy and see how it behaves during my test. In any case I will test a lot my v4 app, so I will notice quickly if that strategy is good or sucky
To be honest I’m not sure if I had to implement this workaround because of Ionic or Angular or just because of my app itself
Anyhow THX a lot for the help!
P.S.: I close this feed then, will reopen or something if I notice problems during tests
To follow up this thread:
- In Angular there is a strategy to preload all modules which could be set in
app.module-ts: https://angular.io/api/router/PreloadingStrategy
or
- To follow up what we discuss above, I have implemented a solution where I only preload one page. I have wrote an article to describe the solution https://medium.com/@david.dalbusco/preloading-modules-in-ionic-v4-1839c34384fb
1 Like
For those interested by this subject, on the Medium article someone posted a comment about how he end up modifying the solution in order to preload all modules without using the default option of Angular: https://medium.com/@abhayastudios/i-ended-up-using-a-different-approach-which-works-fine-with-angular-rxjs-versions-6-b11e61fd9138
1 Like