Angular 6显示应用程序引导的进度答案

【问题标题】：Angular 6 Show progress of app bootstrappingAngular 6显示应用程序引导的进度
【发布时间】：2018-05-13 06:59:51
【问题描述】：

我有一个包含软件包的小项目（angular cdk、angular material 和 firebase）。然而我有一个大小为4 MB 的vendor.js 文件。

作为处理问题的一种方法，我想显示慢速连接的加载进度（加载 4 MB 最多需要 2 分钟），以便用户可以看到应用正在加载。

我已经安装了PWA 和service-worker，这样应用就不会每次都重新加载了。

【问题讨论】：

你在使用 angular cli 吗？如果是，您是否正在运行ng build --prod？如果您使用 --prod，我对 4 MB 文件感到非常惊讶...
我正在使用 cli。请注意，--prod 不再是 6 中的参数，它现在是 angular.json 文件中的一个选项

标签： angular bootstrapping progressive-web-apps

【解决方案1】：

为了回答这个问题：有no easy way 向用户显示他需要等待多长时间才能加载应用程序，但您可以向他显示一个简单的动画。

只需在您的index.html 中添加一些 CSS 动画即可。 app-root 中的所有内容将在启动后被应用程序替换。

<!-- index.html -->
  <!doctype html>
  <html>
    <head>
      <style>
        .spinner {
          height: 200px;
          width: 200px;
          animation: rotate 2s linear infinite;
          transform-origin: center center;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
        @keyframes rotate {
          100% {
            transform: rotate(360deg);
          }
        }
      </style>
    </head>
    <body>
      <app-root> <!-- selector from app.component.ts -->
        <!-- loading layout replaced by app after startupp -->
        <svg class="spinner" viewBox="25 25 50 50">
          <style type="text/css">
            circle{stroke:url(#MyGradient)}
          </style>
          <defs>
            <linearGradient id="MyGradient">
              <stop offset="5%" stop-color="#F60" />
              <stop offset="95%" stop-color="#FF6" />
            </linearGradient>
          </defs>
          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke- 
          width="2" stroke-miterlimit="10"/>
        </svg>
      </app-root>
    </body>
  </html>

基于此Tutorial。

除此之外，正如 maxime1992 所说，您应该在生产模式下使用 Angular 以获得最小文件大小。

【讨论】：

谢谢。我已经实现了加载动画。我只想用进度条显示加载的实际进度（例如 54%）。

【解决方案2】：

尝试通过在 AJAX 请求 like here 中加载 JS 文件来计算下载百分比，并在进度条中显示该数字。

【讨论】：