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

Question

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

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

应用程序模块(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 {}

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

Answer 1

我将向您展示我如何使用正在工作的服务工作者，您可以测试它，看看它是否能解决您的问题。

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

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

这就是你的服务人员应该是什么样子：

{
"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
}
}
]
}