Angular2 pre-bootstrap loading screen (splash screen) with Webpack

How can I implement an splash screen that for example, slowly fades after bootstrapping is complete.

I'm reading this tutorial (the second approach), but it's written for systemjs.

and to save time, I already know this one:

.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
        color: #fff;
    background: #000;
    z-index: -1;
}

my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

my-app:empty + .loading h1 {
    color: #EEE;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translate(0, -50%);
}

that's not clean!

Solution

You can actually do this quite easily. I followed the example of bennadel's blog but slightly modified it so that the html is something like this:

<html>
<head>
    <style type="text/css">
        // CSS style with `transition` animation
        // so that when you apply a class i.e. `.loaded { opacity: 0 }`
        // it will smoothly fade out
        // Also this needs to be with a z-index: 9999 so that it will
        // show over `app-root`.
    </style>
</head>
<body>

    <app-root></app-root>

    <div id="my-splash-screen">
        Loading animation or what ever...
    </div>

</body>
</html>

And then in the src folder of the Angular 2+ app you will find the main.ts file. Initially the content of the file will be the default such as:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

The key here is to append a .then() before the .catch() block in the platformBrowserDynamic() part, which does the magic with applying the css class to the my-splash-screen, waits for a short moment and then removes the splash. In other words, the code will become something like this:

platformBrowserDynamic().bootstrapModule(AppModule)
.then(() => {
    let splashScreen = document.getElementById('my-splash-screen');
    splashScreen.setAttribute('class', 'loaded');
    setTimeout(function(){ splashScreen.remove(); }, 1300); // change the timeout to be almost the same as the transition animation.
})
.catch(err => console.log(err));