The splash screen is the screen that shows up when your app is loading. It's NOT just a cosmetic screen or something that you can make faster, it simply shows up while Angular loads and hides immediately after it finishes loading.
When you first arrive your app via its website address, the index.html loads first. It has all the required scripts injected in it by the AngularCLI, so as soon as it loads, it also starts loading the required script files.
After those required script files loaded, Angular starts the Bootstrapping progress and loads the first component (usually the AppComponent). Then AppComponent takes over and loads other modules and components and your app starts running.
While all of these happening, you will see nothing on the screen simply because the index.html file has nothing in it except the script injections and the entry point for your AppComponent. That's where the splash screen comes into play and hides the white screen of loading.
Splash screen content stays in the index.html
file. The fuse-splash-screen
dummy element holds everything related to the splash screen.
This element is not an actual Angular component, it's just a simple wrapper to hold everything you may want to show on the splash screen.
Splash screen styles are located in src/assets/styles/splash-screen.css
file.
You can change the styles to modify the look of the splash screen and put anything you want into the fuse-splash-screen
element to show on the
page.
If you don't want to show the splash screen and you are happy with the white screen of loading, then you can simply remove the
fuse-splash-screen
dummy element and its content from the index.html file as well as the link
element that loads the splash-screen.css
file: