带有 Webpack 的 Angular2 预引导加载屏幕（启动屏幕）答案

【问题标题】：Angular2 pre-bootstrap loading screen (splash screen) with Webpack带有 Webpack 的 Angular2 预引导加载屏幕（启动屏幕）
【发布时间】：2017-06-24 02:03:57
【问题描述】：

如何实现启动画面，例如，在引导完成后慢慢淡出。

我正在阅读 this 教程（第二种方法），但它是为 systemjs 编写的。

为了节省时间，我已经知道这个了：

.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%);
}

那不干净！

【问题讨论】：

我已按照本指南进行操作：bennadel.com/blog/…
@FabrizioCaldarelli，是一样的。没有 webpack :|
我也在使用 webpack，但是该指南没有向 webpack 添加配置（它都在 index.html 中）。
@FabrizioCaldarelli，实际上有。 system.config.js 中的 global.bootstrapping = System.import("app" ).then(...); 部分。我说的是第二种方法。
有什么地方让你觉得不干净？

标签： angular webpack webpack-2

【解决方案1】：

您实际上可以很容易地做到这一点。我按照bennadel's blog 的示例进行了一些修改，使 html 如下所示：

<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>

然后在 Angular 2+ 应用程序的 src 文件夹中，您将找到 main.ts 文件。最初文件的内容将是默认的，例如：

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));

这里的关键是在platformBrowserDynamic() 部分的.catch() 块之前附加一个.then()，这可以将css 类应用于my-splash-screen，等待片刻然后删除溅。也就是说，代码会变成这样：

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));

【讨论】：