Question

我有一个多模块应用程序，其中一些模块是延迟加载的，因此dist文件夹中的输出文件如下所示：1.d2ef1 ****** 8da.chunk.js，2.dsfd3 *** *** 8da.chunk.js以及明智的选择。问题是，如果我为生产创建一个新的版本，则哈希会更改，因此文件名也会更改。假设用户尚未刷新页面，他们仍将尝试延迟加载旧文件，该文件将显示为找不到文件。在这种情况下，我的页面会挂起。我应该如何处理？

Answer 1

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

如果部署了新版本的应用程序，它将利用角度服务工作人员来提醒用户重新加载。

例如：

安装@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();
        }
      });
    }
  }
}

如果您在角度4和cli〜1.6上。步骤应相同。

npm install @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/**"
    ]
   }
 }]
}

尝试一下有了适当的配置，我们可以构建用于生产（ng build --prod）的应用，并使用- npx http-server /dist

Answer 2

除上述＃4之外的大多数步骤都是由最新的角度cli命令（https://angular.io/api/service-worker）自动完成的： ng添加@ angular / pwa

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

2 个答案: