NestJS 服务器上的 Angular PWA 在新部署后崩溃答案

【问题标题】：Angular PWA on a NestJS server crashes after new deploymentNestJS 服务器上的 Angular PWA 在新部署后崩溃
【发布时间】：2021-03-24 10:16:03
【问题描述】：

我在 NestJS（版本 7）服务器上运行 Angular PWA（版本 11）。每次新部署后，PWA 都会崩溃，因为浏览器会尝试加载不再存在的 JavaScript 文件，并且服务器会重定向到根站点 (html)：

main.945bce5e14ef8a6c0362.js:1 Uncaught SyntaxError: Unexpected token '<'

app模块（app.module.ts）配置如下：

import { join } from 'path';

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';

import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      serveStaticOptions: {
        etag: false,
        setHeaders: (res, path) => {
          if (path.includes('ngsw.json')) {
            res.set('Cache-Control', 'no-cache, no-store, must-revalidate');
          }
        }
      },
      rootPath: join(__dirname, '..', 'pwa'),
      exclude: ['/api*']
    })
  ],
  controllers: [AppController],
  providers: [AppService]
})
export class AppModule {}

有什么建议吗？提前谢谢你。

【问题讨论】：

标签： angular express service-worker nestjs angular-pwa

【解决方案1】：

我将向您展示我如何使用正在工作的 Service Worker，您可以对其进行测试，看看它是否能解决您的问题。

这是您导入服务工作者的方式：

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

你应该在你的app.component 中使用它来测试浏览器是否实现了服务工作者：

public ngOnInit(): void {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.available.subscribe(() => {
      if (confirm('Nouvelle version disponible')) {
        window.location.reload();
      }
    });
  }
}

这就是你的 Service Worker 的样子：

{
  "index": "/index.html",
  "assetsGroups": [
    {
      "name": "App Name",
      "installMode": "prefetch",
      "ressources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFile": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "ressources": {
        "files": [
          "assets/**"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "example-api",
      "urls": [
        "/api/example"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "timeout": "10s",
        "maxAge": "1d",
        "maxSize": 100
      }
    }
  ]
}

【讨论】：