带有百分比指示器的 Angular 2+ 应用程序预加载器答案

【问题标题】：Angular 2+ Application pre loader with percentage indicator带有百分比指示器的 Angular 2+ 应用程序预加载器
【发布时间】：2018-11-27 21:53:02
【问题描述】：

有谁知道使用百分比指示器（类似于 Gmail 的加载屏幕）实现 Angular 2+ 预加载器的好解决方案？

我知道通常的方法是在我们的<app-root> 中添加<div> 并为其设置样式，甚至可能添加 CSS 动画，一旦加载应用程序，它将被应用程序内容替换。

但是...我真正想要的是显示动画启动屏幕（SVG 或其他任何东西），在动画完成后加载栏应该出现并显示进度状态。

首先，我在考虑单独的启动组件，它只是急切加载的组件，然后从那里加载所有其他模块，但是如果我将该组件映射到“/”，如何首先在任何其他路线上显示它（开始观点）。此外，这意味着 Angular 主包必须已经加载，所以这不是一个好的选择。

这个问题很可能过于宽泛，不适合 Stack Overflow，但我找不到任何好的解决方案。 :(

有没有办法在没有 Angular 的情况下加载纯 JavaScript 来加载 Angular 并显示进度？或者任何其他（更好的）想法？

这必须是可以实现的，因为整个 Gmail 都是 Angular 应用程序并且他们拥有它：D

【问题讨论】：

标签： javascript angular angular2-routing preloader

【解决方案1】：

你可以试试ngx-progressbar，真的很酷。该 API 不是微不足道的，而是有据可查的，因此您可以构建任何复杂的进度条。

UPD经过讨论，我建议以下方法（index.html）

1) 提供html级别的进度条：

<my-app>
  <div style="width: 100%; background-color: grey;">
    <div id="myProgressBar" style="width: 1%; height: 30px; background-color: green;">
    </div>
  </div>
</my-app>

2) 加载您的 app bundle 并通过 XMLHttpRequest 手动将其注入 DOM

const tag = document.createElement('script');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'my-angular-app-bundle.js?' + new Date().getTime());
xhr.onloadend = (e) => document.head.appendChild(tag);
xhr.send();

3) 使用XMLHttpRequest.onprogress查看进度并更新进度条参数

const barElement = document.getElementById('myProgressBar');
xhr.onprogress = (e) => {
  if (e.lengthComputable) {
    const width = 100 * e.loaded / + e.total;
    barElement.style.width = width + '%';
  }
}

为了使onprogress 更新更流畅，您可以在setInterval 循环中增加进度条宽度：

if (e.lengthComputable) {
  const endWidth = 100 * e.loaded / + e.total;
  const intervalId = setInterval(() => {
    const width = parseInt(barElement.style.width, 10);
    if (width >= endWidth) {
      clearInterval(intervalId);
    } else {
      width += 2; 
      barElement.style.width = width + '%'; 
    }
  }, 40);
}

【讨论】：

这真的很酷，但我仍然需要加载 Angular 才能使用它。如果我显示用于在应用程序中加载延迟加载的模块，那就太好了。
我在想的是加载整个应用程序（AOT 编译）而不延迟加载，而是在加载 Angular 之前显示进度。加载 Angular 后，所有模块都将在那里。检查 Gmail 以了解它应该是怎样的。
@MilosMiskoneSretin 我起草了一个小演示，你能试试吗？ stackblitz.com/edit/angular-ygfgju 看起来像你需要的东西吗？所有的魔法都在 index.html 中。
这更像是一种解决方法 :( 这不显示真正的加载进度。我需要计算 Angular 包大小并显示实际百分比 :(
我现在正在考虑仅引导 SplashScreen 组件并将其用作入口组件，这将触发其他模块的加载并显示加载进度，但仍然不知道如何正确操作:(

【解决方案2】：

有时基于标签的加载效率更高，您可以使用PreloadJS 库。您还可以使用onload 事件手动跟踪脚本加载的结束，并人为地插入进度以给人以应用程序正在以恒定速度加载的印象。 Gmail 可能根本不显示实际进度，它只是等待加载结束使用计时器显示虚假的稳定进度。

【讨论】：

我测试了不同的连接速度，Gmail 似乎使用的是真实百分比。另外，如果我使用 PreloadJS，你有没有建议用 AngularCLI 来实现它，因为 CLI 在编译时会自动添加 JS 捆绑链接，在这里我需要手动加载它们？
cli 允许嵌入全局脚本（即 PreloadJS），但我找不到任何方法来覆盖应用程序脚本标签的生成，可能你必须编写自定义脚本并在 ng build 之后运行它，即在 @987654324 @package.json的部分。

【解决方案3】：

我不认为加载指示器显示应用程序的加载。我认为它显示了应用程序加载后数据的加载。想想邮件、联系人等数据……我认为 gmail 加载分为两部分。

第 1 部分：在应用启动时显示一个简单的动画（没有加载指示器）。

第 2 部分：现在应用已开始继续显示加载动画。接下来，盘点您需要发出多少数据请求并为此添加一个加载栏。

您可以使用this 来制作启动动画。

【讨论】：

【解决方案4】：

我在我的 Angular 应用程序中使用 PACE 来显示初始屏幕的进度条。你也可以随心所欲地展示。您需要通过以下链接：

Automatic page load progress bar

希望对你有所帮助。

【讨论】：

【解决方案5】：

我想到的唯一方法是将您的应用程序连接到 CLI 并显示它从命令行本身显示的进度。

【讨论】：

【解决方案6】：

也许我的回答有点晚了，但是你可以看看这个教程，我认为这是非常现实和有用的实现：

Implementing Simble PRogress Bar Angular/Server side

【讨论】：