Javascript 在生产中对角度应用程序进行版本控制

我有一个多模块应用程序，其中一些模块是延迟加载的，所以dist文件夹中的输出文件看起来像1.d2ef1**********8da.chunk.js、2.dsfd3*******8da.chunk.js等等。问题是，如果我为产品创建了一个新的构建，那么散列会改变，文件名也会随之改变。假设用户尚未刷新页面，他们仍将尝试延迟加载旧文件，该文件将显示为“未找到文件”。在这种情况下，我的页面将挂起。我应该如何处理它？

您可以利用Angular Service Workers将您的应用程序更改为PWA（渐进式Web应用程序）

它利用angular service workers提醒用户在部署新版本的应用程序时重新加载

例如：

安装

@angular/service worker

，将其添加到

package.json

并安装依赖项

在AppModule中导入

ServiceWorkerModule

：

import { ServiceWorkerModule } from '@angular/service-worker';

在AppModule导入阵列中注册它：

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

在应用程序根组件中使用它：

import { Component, OnInit } from "@angular/core";
import { SwUpdate } from "@angular/service-worker";


export class AppComponent implements OnInit {

constructor(private swUpdate: SwUpdate){}

ngOnInit(): void {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe(() => {
        if (confirm("A New version of site is available. Load New Version?")) {
          window.location.reload();
        }
      });
    }
  }
}

如果您使用的是angular 4和cli~1.6。过程应该是一样的

• npm安装@angular/service worker

• 如上所述，将其添加到应用程序模块中
• 在应用程序的src目录中创建一个

  ngsw config.json

  文件

  {
   "index": "/index.html",
    "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
    "files": [
      "/favicon.ico",
      "/index.html"
    ],
    "versionedFiles": [
      "/*.bundle.css",
      "/*.bundle.js",
      "/*.chunk.js"
    ]
  }
  }, {
   "name": "assets",
   "installMode": "lazy",
   "updateMode": "prefetch",
    "resources": {
     "files": [
       "/assets/**"
      ]
     }
   }]
  }
  

• 试一试 配置就绪后，我们可以为生产构建应用程序（

  ngbuild--prod

  ），并使用本地静态服务器进行测试-

  npx http服务器/dist

---

除上述#4之外的大多数步骤都是由最新的angular cli命令（）自动完成的：

---

ng add@angular/pwa

您应该使用angular服务人员来实现这一点。在这里阅读更多信息：非常感谢。我用的是Angular:4.4.6，你能给我一些建议吗。