Angular 2+应用程序预加载器,带百分比指示器

Question

有没有人知道用百分比指示器实现Angular 2+预加载器的良好解决方案(类似于Gmail的加载屏幕)？

我知道通常的方法是添加<div>内部我们的<app-root>风格,甚至可以添加CSS动画,一旦应用程序加载,它将被应用程序内容替换.

但是......我实际看的是显示动画启动画面(SVG或其他任何内容),在动画完成后,应该出现加载栏并显示进度状态.

在第一点,我正在考虑单独的splash组件,它将只是组件急切加载并从那里加载所有其他模块但是如果我将该组件映射到'/'如何在任何其他路由上显示它作为第一个(起始点).此外,这意味着必须已加载Angular主包,因此这不是一个好的选择.

很可能这个问题太宽泛而且不适合Stack Overflow,但我找不到任何好的解决方案.:(

有没有办法加载没有Angular的纯JavaScript,它将加载Angular并显示进度？还是其他(更好)的想法？

这必须是可以实现的,因为整个Gmail都是Angular应用程序而且它们拥有它:D

Answer 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)加载您的应用程序包并通过手动将其注入DOM XMLHttpRequest

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