如何使用angular-cli創建加載屏幕

我有一個使用angular-cli創建的angular2項目。 Angular-cli使用webpack。如何使用angular-cli創建加載屏幕

我會定製加載程序，因爲在白色背景上的黑色「加載...」對我來說並不好。

因此，我用裝載機的svg動畫重寫index.html。但動畫滯後，有時會凍結。我的第一個解決方案是，在index.html的末尾刪除* .bundle.js。然後，我捕獲DOMContentLoaded事件以顯示svg。賓果，非常整齊。

然後，我爲webpack添加動態不同的腳本* .bundle.js。

問題出在main.bundle.js上，因爲執行過程中出現錯誤。

如果我讓原始腳本在DOM中工作，但不是動態的。

因此，而不是：

<script type="text/javascript" src="inline.bundle.js"></script> 
    <script type="text/javascript" src="polyfills.bundle.js"></script> 
    <script type="text/javascript" src="scripts.bundle.js"></script> 
    <script type="text/javascript" src="styles.bundle.js"></script> 
    <script type="text/javascript" src="vendor.bundle.js"></script> 
    <script type="text/javascript" src="main.bundle.js"></script>

我把：

<script type="text/javascript"> 
    var body = document.getElementsByTagName("body")[0]; 
    var app = document.getElementsByTagName("app-root")[0]; 
    body.removeChild(app); 

    function appendScript(src){ 
     var s = document.createElement("script"); 
     s.src = src; 
     s.type = "text/javascript"; 
     body.appendChild(s); 
    } 
    document.addEventListener("DOMContentLoaded", function(){ 
     var timer = setInterval(function(){ 
     body.appendChild(app); 

     appendScript("inline.bundle.js"); 
     appendScript("polyfills.bundle.js"); 
     appendScript("scripts.bundle.js"); 
     appendScript("styles.bundle.js"); 
     appendScript("vendor.bundle.js"); 
     appendScript("main.bundle.js"); 
     clearInterval(timer); 
     }, 1500); 
    }) 
    </script>

我想顯示不同的包的加載之前加載..

我刪除應用程序根因爲我希望有一個不透明的CSS動畫褪色效果

錯誤是：

Uncaught TypeError: Cannot read property 'call' of undefined 
    at __webpack_require__ (bootstrap c9cc4a4…:52) 
    at Object.192 (src async:7) 
    at __webpack_require__ (bootstrap c9cc4a4…:52) 
    at Object.635 (main.bundle.js:4838) 
    at __webpack_require__ (bootstrap c9cc4a4…:52) 
    at webpackJsonpCallback (bootstrap c9cc4a4…:23) 
    at main.bundle.js:1

我在__webpack__require函數中添加了一個console.log以顯示中斷執行的moduleId。這個模塊ID是1

你有一些想法嗎？

來源

2017-04-03 Pierre-Luc BLOT

有兩種可能的解決方案：如果你想有靜態動畫只是把這個動畫在您的index.html 應用標籤

<app-root> 
    <div id="preloader"> 
     <div class="sk-wave"> 
      <div class="sk-rect sk-rect1"></div> 
      <div class="sk-rect sk-rect2"></div> 
      <div class="sk-rect sk-rect3"></div> 
      <div class="sk-rect sk-rect4"></div> 
      <div class="sk-rect sk-rect5"></div> 
     </div> 
    </div> 
</app-root>

裏面我對preloader元素的CSS樣式製作的動畫，但這不相關。重要的部分是，應用程序加載app-root元素的所有內容後，應用程序將覆蓋該加載器。

============================================== ========================= 第二個選項...這次你不把它放在app-root元素的內部。

<body> 
    <app-root></app-root> 
    <div id="preloader"> 
     <div class="sk-wave"> 
      <div class="sk-rect sk-rect1"></div> 
      <div class="sk-rect sk-rect2"></div> 
      <div class="sk-rect sk-rect3"></div> 
      <div class="sk-rect sk-rect4"></div> 
      <div class="sk-rect sk-rect5"></div> 
     </div> 
    </div> 
</body

然後使用Angular2 Lifecicle hooks隱藏預加載視圖

import { Component, AfterViewInit } from '@angular/core'; 
import { PreloaderService } from './_ui-module/_preloader'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.styl' ] 
}) 
export class AppComponent implements AfterViewInit { 

    constructor(private preloader: PreloaderService){ 

    } 

    //HERE 
    ngAfterViewInit(): void { 
     this.preloader.hide(); 
    } 

}

來源

2017-04-03 18:56:14

我使用第一種解決方案，但我想在加載不同的包之前顯示加載器.. –

後找到一個純CSS加載頁面，並把<div>元素app-root內。這些都是真的很酷的人通過lukehaas：https://projects.lukehaas.me/css-loaders/

這裏是我沒有使用從上面的鏈接紡織家一個工作示例：https://plnkr.co/edit/J3JNhm82Rgxq1h9h9ktb?p=preview

下面是我所做的更改：

內body我添加了一個<style>標記，從源代碼中複製了以上鍊接中的一種樣式，並將其添加到<style>中
添加源html，再次從lukehaas的網站上的源代碼。在根元素my-app裏面加上這樣的內容:(你的情況是<app-root>）。
```
<my-app> 
     <div class="loader">Loading...</div> 
</my-app> 
```

一旦角已自舉，它會刪除裏面的一切，裝載機將不復存在。

來源

2017-04-03 19:00:25

我使用第一個解決方案，但我想在加載不同的包之前顯示加載器。 –

如果根據我的回答做到這一點，它們都是內聯的，所以它始終是第一個顯示的內容。如果角度有錯誤或沒有加載，這仍然可以工作 –

我的加載程序能夠正常工作，但如果我使用慢速連接，動畫是因此，如果我在頁面中加載兩次，首先svg和腳本，這個問題就解決了，但是，webpack無法加載moduleId = 1 如果我將原始html中的腳本保存到我的index.html中，webpack可以正常工作，但不會與網絡不佳的動畫相關：/ –

我找到了解決方案。它很有效

我修復了我的appendScript函數。

function appendScript(src){ 
    var s = document.createElement("script"); 
    s.src = src; 
    s.type = "text/javascript"; 
    s.async = false; 
    body.appendChild(s); 
}

參見：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

「[1]在不支持異步屬性舊的瀏覽器，解析器插入腳本塊解析器;腳本插入的腳本在IE和WebKit異步執行，但在Opera 4.0和4.0之前版本的Firefox中同步;在Firefox 4.0中，腳本創建的腳本的異步DOM屬性默認爲true，因此默認行爲與IE和WebKit的行爲相匹配。在document.createElement（「script」）。async求值爲true的瀏覽器中（例如Firefox 4.0），在要維護順序的腳本上設置.async = false。不要調用document.write（）從一個異步腳本。在Gecko 1.9.2中，調用document.write（）具有不可預知的效果。在Gecko 2.0中，從異步腳本中調用document.write（）不起作用（除了向錯誤控制檯輸出警告外）。從Gecko 2.0（Firefox 4/Thunderbird 3.3/SeaMonkey 2.1）開始，將通過調用document.createElement（「script」）創建的腳本元素插入到DOM中，不再以插入順序執行執行。這一改變讓Gecko能夠正確遵守HTML5規範。要使插入腳本的外部腳本以其插入順序執行，請在它們上設置.async = false。「

來源

2017-04-04 00:24:36

如何使用angular-cli創建加載屏幕

回答

相關問題