Show a progress bar when loading webpack clusters in a browser

Question

I am developing an angular 2 application with webpack, and I want to show a progress bar when pieces of webpack are loaded in a browser to show the client something in the process. I sent a download notification when I hit the API for the GET / POST data, but I did not know how I show the loading bar when loading browser applications.

Answer 1

I used get / post api requests in the service and matched it using "Observable". You must subscribe to it in the component in which you use this particular service.

, , .

:

, "Loading is in progress...", .

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