Create a Custom Loading Screen in Your Angular App

Brian Treese
5 min readJul 5, 2024

--

If you’ve built apps in angular in the past, I’m sure you’ve experienced the blank screen while you wait for the app to be bootstrapped. In smaller applications, it’s not as noticeable but in larger, more complex applications, we may need to wait for a little bit before we see the actual content loaded. And staring at a blank screen while we wait is not ideal. Well, we can upgrade this experience by adding our own custom loading screen and it’s pretty easy to do too. In this example that’s exactly what we’re going to do.

So, in order to work on our loading screen, we’re going to need to be able to see it right? We’ll need to do something to make it visible and keep it that way.

Well, I’ve found that the easiest way to do this is to simply comment out the bootstrapApplication() function.

main.ts

...

// bootstrapApplication(App,{
// providers: [
// provideAnimations()
// ]
// });

This is the function that basically creates the Angular application, so by removing it, the app component…

--

--