Angular 15 - Slow initial load

[wraith locust]

I've been trying to troubleshoot a performance issue we have in our application on iniital load.

When the page first loads the user sees a blank white screen for 4-5 seconds before our app actually begins loading.

Initially we thought it might have been a problem with our bundle size, and while I'm not thrilled with how large it is we can see from the network tab that it completes the requests, and then goes idle for the ~4-5 second window before we then start seeing it then paint and load the rest of the application.

I'm kind of at a loss for what could be happening in that time window, we don't have any code seeming to run, other than brief Task markers that appear in the performance tab that take like 40-80 microseconds each, and then I can see the _moduleDoBootstrap call and calls for createRootComponent and such, all of which are reasonable fast.

[lilac jetty]

Do you have any APPLICATION_INITIALIZER configured?

[wraith locust]

we import the APP_INITALIZER from angular/core but otherwise don't seem to be doing any of our own

and that's imported in our app.module.ts, which doesn't seem to get invoked until AFTER that 4-5 second window

[lilac jetty]

Huh, that is quite strange. APP_INITIALIZER blocks the app component from being started, but not the app module

[wraith locust]

Yeah it's the only place in our application that we're even importing it from what I can tell

[lilac jetty]

And your app.component.ts is not called (check constructor and ngOnInit and potentially other lifecycle hooks) until after that delay?

[wraith locust]

Yeah I'm fairly certain. I confirmed that this morning though so let me double check that, been a crazy day 😆

Yeah. Only lifecycle we have in there is the ngOnInit and I definitely didn't see that hit until after the delay.

I didn't try the constructor cuz we just call super but I can confirm that

[lilac jetty]

Well, never mind my question even... if your app.module.ts doesn't happen until after the delay there's no way the app.component.ts happens.

Just to be sure, this is happening in development as well (ng serve)? Or only in prod?

[wraith locust]

Yeah in both envs

[lilac jetty]

Okay, then I would start putting breakpoints in, start where you call bootstrapModule and try to find out where the delay is happening.
Unfortunately it is hard to give much more concrete advise wihtout seeing this in action myself 😄