进度条不显示'；无法使用具有angular cli的服务人员

我们正在开发Angular（4）应用程序，并使用cli启用了服务人员

一切都很好，除了我们有一个文件上传进度条，它卡在0%上，只有当它完成后，它才会变为100%

我们怀疑这是因为服务人员，因为我们在开发环境中没有看到它

奇怪的是，从我的理解来看，服务人员不应该处理POST请求

我们使用常规的

HttpClient

如何解决这个问题

编辑：

---

现在我确信这与服务人员有关，因为当我在“应用程序”选项卡中按下“网络旁路”时，它工作正常。

我建议您看看前面的问题。这与你的情况并不完全相同，但它可以作为你的起点！您应该阅读有关

progressEventObservable

我建议更新您的服务人员以忽略post请求。我也有类似的问题，只是我没有使用angular

self.addEventListener("fetch", event => {
    //This is the code that ignores post requests
    if (event.request.method === "POST") {
        return;
    }

    //The rest of your code to handle fetch events.
});

---

对于临时解决方案，您必须修改ngsw-worker.js

在ngsw-worker.js文件中，查找onFetch函数

修改onFetch函数，使其在检测上载端点时停止执行

请参阅下面的代码段：

---

您可以查看此文件以了解更多信息。

Angular service worker正在筛选您的所有提取请求，由于您需要此文件来更新文件上载进度，因此无法跟踪上载进度。这是需要考虑的重要因素，因为（可能）将来您需要这种请求（获取）来执行其他操作。 如果您使用的是angular service worker的最新版本，那么您可以在请求中添加一个头，以便告诉angular service worker（ngsw）：嘿，不要过滤来自此请求的获取调用

为了完成我上面提到的操作，您只需向Http调用添加一个头，头必须是： {'ngsw旁路'：'true'}

此标头将通知ngsw，ngsw必须通过httpClient调用生成的所有获取

例如：

HttpClient.post(apiPath, 
   formData, 
   { 
     reportProgress: true, 
     observe: 'events', 
     headers: new HttpHeaders({ 'ngsw-bypass': 'true' }) 
   }).subscribe({
      next(events) {
          if (events.type === HttpEventType.UploadProgress) {
              // Math.round((events.loaded / events.total) * 100)
          }
      }, complete() {
          // some code here
      }, error(error) {
          // some code here
      }
   })

---

伙计们，当你们开始通话时，这个进度是0%。并在通话结束时重新设置。Try:

.subscribe（data=>{this.data=data；//进度50%this.someFunction（）//进度75%}）当完成100%时。这正是我们所做的。这不适用于启用AOT+服务工作者（当它转到quick时；）你会在0001秒时看到50%，然后在0002秒时看到75%，在0003秒时看到100%，但事实并非如此。我们正在上传70mb的文件，上传只需几分钟。我们只看到0和100。两者之间什么都没有。如果我努力重新搜索，我看到的一定是服务人员。我的想法是在订阅时间之外倒计时，设置为几毫秒或其他任何时间。每次完成时检查
如果（this.data==未定义）{//progress}否则{//unsubscribe}
。这可以是注释；）这与服务人员的工作有什么关系？我知道这个答案，但我们所做的是在ngsw文件上运行一个吞咽任务，并修改if。我更喜欢这个解决方案，因为我可以控制缓存的内容，而不是缓存的内容
HttpClient.post(apiPath, 
   formData, 
   { 
     reportProgress: true, 
     observe: 'events', 
     headers: new HttpHeaders({ 'ngsw-bypass': 'true' }) 
   }).subscribe({
      next(events) {
          if (events.type === HttpEventType.UploadProgress) {
              // Math.round((events.loaded / events.total) * 100)
          }
      }, complete() {
          // some code here
      }, error(error) {
          // some code here
      }
   })