如何显示一个具有百分比的进度栏，直到最初的角度负载？ 关于此主题有很多问题： 角2初始加载进度 显示Angular加载文件时显示进度栏？ 等等 但是他们很老，没有得到答复。因此，我们仍然有一个问题。我...

Question

和等等

他们很老，没有得到答复。因此，我们仍然有一个问题。我知道它有些复杂，但我相信这并非不可能。我们在Dev Env中确实有很大的捆绑包，例如10MB+，许多通过VPN访问我们应用的人遭受了白页灾难 - 文件加载缓慢，他们必须等待一段时间，如果一个人失败了，那么页面停留，则空白 有一种方法可以跟踪Angular应用程序初始加载过程的实际进度吗？我们可以向用户展示初始加载过程的实际百分比吗？ inindex.html文件在

<app-root>

tag下添加您的加载程序内容。

Html：

Answer 1

<app-root>
      <div class="pageLoaderMain">
          <div class="pageLoaderContent">
              <div class="loaderImage">
                 <img src="assets/loaderimage.gif">
              </div>
              <div class="loaderContent">Loading...</div>
          </div>
      </div> 
</app-root>

CSS：

.pageLoaderMain {width:100%; height:100%; z-index:99990; left:0;top:0%;color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed;  background:rgba(0,0,0,0.5);}
.pageLoaderMain .pageLoaderContent{background: none;z-index:99991; left:46%; top:50%; position:absolute; overflow:hidden; padding:5px; border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; border: 0px solid #000000;}
.pageLoaderMain .loaderImage{float: none; display: block;text-align: center;}
.pageLoaderMain .loaderContent{float:left;margin:8px 2px 8px 5px; color:#fff; font-weight:300; font-size:13px;}