Ability to render app to DOM before DOMContentLoaded

This issue has been tracked since 2022-09-14.

Which @angular/* package(s) are relevant/related to the feature request?



I'm working on adding a loading state to an app. Testing with throttling the network to 4g speeds, I noted that the angular app isn't rendering anything until DOMContentLoaded is fired. That event is fired after 3.58 seconds, but (according to screen shots captured in chrome inspector, and plain observation of page load) the page is visible before 1 second.

I would like a way to render the angular app before DOMContentLoaded

Circled in red is the first frame where the loading icon in visible. Note that content (loaded server side) is visible before that. Also note the large break in time between that screen shot and the screen shot prior.

Proposed solution

Expose a bootstrapping method which takes the root elem as an argument, and doesn't wait for domcontentloaded

var elem = document.querySelector('#root');
platformBrowserDynamic().bootstrapModuleRaw(AppModule, elem)

Alternatives considered

I tried using existing manual bootstrapping methods (using ngDoBootstrap), but that still waited for the domcontentloaded event

JoostK wrote this answer on 2022-09-14

I am a bit confused; AFAIK module bootstrap is only asynchronous to allow APP_INITIALIZERs to run; Angular's bootstrap logic doesn't otherwise wait for the DOMContentLoaded event.

yringler wrote this answer on 2022-09-14

Thank you for your quick response. So I guess the issue I'm seeing is not caused by angular. For some reason even the angular main.ts isn't running until further on in the page load, but I guess the cause is something on my end.
Back to the drawing board.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-09-30
Star Count 84091
Watcher Count 3064
Fork Count 22233
Issue Count 1203


Issue Title Created Date Updated Date