在浏览器上加载 webpack 块时显示进度条答案

【问题标题】：Show progress bar while webpack chunks load on Browser在浏览器上加载 webpack 块时显示进度条
【发布时间】：2017-03-08 06:04:46
【问题描述】：

我使用 webpack 开发了一个 angular 2 应用程序，我想在浏览器上加载 webpack 块时显示进度条，以向客户端显示一些进展情况。当我点击 GET/POST 数据的 API 时，我放置了加载通知，但我没有知道当浏览器加载应用程序块时我如何显示加载栏。

【问题讨论】：

嘿，你有解决这个问题的办法吗？我有同样的问题。

标签： angular webpack progress-bar

【解决方案1】：

我在服务中使用了 get/post api 请求并使用“Observable”对其进行了映射。您必须在使用该特定服务的组件中订阅它。

您可以使用此“订阅”方法放置进度条或任何文本，因为第三个参数将在完成加载数据后执行。

您可以从此代码中获得帮助：

您可以将进度条的代码可见性代替“正在加载...”。

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

【讨论】：