An Easy Way to implement a Splas

A splash screen show as fast as possible while user wait for our web application loading.

An angular application normally has a little heavy .js file. If splash screen implemented as angular component, loading .js file caused too much delay.

Here is the simplest solution: add splash/loading html inside <app-root></app-root> tag.

<app-root>
   Loading...
</app-root>

Content inside app-root tag will be replaced by AppComponent after angular finished bootstrap.

Create Eyes Catching Spinner

Open CodePen.io and search simple css spinner, emb required css inside .html file, make sure spinner shown as long as .html load.

Use Server render to Skip Splash screen

I think it is the best if application can shown without any delay, use server render. Server render is complex, but get the best result.