Webpackチャンクがブラウザにロードされている間に進行状況バーを表示

Question

webpackで角度2のアプリケーションを開発していますが、webpackチャンクがブラウザにロードされているときにプログレスバーを表示して、 GET/POSTデータのために私はブラウザロードアプリケーションのチャンクのときにどのようにロードバーを表示するか分からなかった。

Answer 1

サービスでget/post apiリクエストを使用し、 'Observable'を使用してマッピングしました。特定のサービスを使用しているコンポーネントでサブスクライブする必要があります。

この「サブスクライブ」メソッドを使用してプログレスバーまたは任意のテキストを配置することができます.3番目の引数はデータのロードが完了すると実行されます。

あなたは、このコードから助けを得ることができますの代わりに

「ロードが進行中です...」あなたのプログレスバーのコードの可視性を置くことができます。

export class MyApp { 

private data: Observable<Array<number>>; 
private values: Array<number> = []; 
private anyErrors: boolean; 
private finished: String; 


constructor() { 
} 

init() { 
    this.finished = "Loading is in progress....."; 
    this.data = new Observable(observer => { 
     setTimeout(() => { 
      observer.next(42); 
     }, 1000); 

     setTimeout(() => { 
      observer.next(43); 
     }, 2000); 

     setTimeout(() => { 
      observer.complete(); 
     }, 3000); 
    }); 

    let subscription = this.data.subscribe(
     value => this.values.push(value), 
     error => this.anyErrors = true, 
    () => this.finished = "Loading completed!!" 
); 
} 

} 

http://plnkr.co/edit/IFap1uTpXzyL453EqHum?p=preview