Angular 预引导（第一个屏幕）加载程序的动画在初始加载期间冻结

Question

这里的简单演示： https ://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview（我使用了官方 angular.io/docs 演示应用程序）

问题是：在 Angular App 的初始加载过程中，第一个屏幕加载器（我使用了 loader.svg）动画会冻结一秒钟

过程是这样的：打开页面，svg loader动画开始-> loader动画冻结-> loader动画重新开始-> angular app完成加载，loader隐藏

在这个演示中，冻结更明显： http : //iarouse.com/dist-angular2-material/v1/

<my-app>
  <!-- the loader -->
  <div id="loader-container"></div>
</my-app>

我的真正的应用程序更大，并且在引导过程中初始加载器动画冻结了几秒钟，这令人沮丧

我能做些什么来使它顺利？

Answer 1

我遇到了你的问题，因为我正在渲染一个 gif 微调图像。 我尝试了@bviale 发布的解决方案，它奏效了。

只需使用在https://www.w3schools.com/howto/howto_css_loader.asp 中建立的代码并放在app-root标签之间。

Answer 2

使用演示： https : //plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview

如果我在结束后将下面的脚本放在最后，那么我会看到加载程序流畅地播放而不会中断，因为在控制台上看到很多错误。

<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

我正在谈论的错误示例：

GET https://unpkg.com/core-js@3.6.5/client/shim.min.js net::ERR_ABORTED 404

在正文之后移动脚本后，您的 index.html 如下所示：

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular Tour of Heroes</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">
    <!-- Polyfills -->


    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>
      <div id="loader-container"></div>
    </my-app>
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
  </body>

</html>