Angular Universal开发环境中ngsw-worker.js未生成，如何实现PWA测试？

问题根源 #

npm run dev:ssr 默认执行的是Angular Universal的SSR开发服务流程，该流程默认不会触发浏览器构建的Service Worker生成逻辑——因为开发模式下通常以快速热更新为优先，默认跳过了PWA相关的打包步骤。

解决方案步骤 #

1. 确保开发构建配置启用Service Worker

修改angular.json中项目的开发构建配置，明确在开发模式下开启Service Worker：

"projects": {
  "client-app": {
    ...
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          // 全局基础配置（可选，若希望所有构建都启用）
          "serviceWorker": true,
          "ngswConfigPath": "ngsw-config.json"
        },
        "configurations": {
          "development": {
            // 单独为开发模式启用（推荐，避免影响生产构建默认配置）
            "serviceWorker": true,
            "ngswConfigPath": "ngsw-config.json",
            ...其他开发配置
          }
        }
      }
    }
  }
}

2. 修改dev:ssr启动命令，触发带SW的浏览器构建

默认的dev:ssr命令仅启动SSR服务，不会主动生成SW文件。需要修改package.json中的脚本，先执行带Service Worker的开发构建，再启动SSR服务：

方式一：单次构建后启动SSR（适合测试场景）

"scripts": {
  ...
  "dev:ssr:sw": "ng build --configuration development --service-worker && ng run client-app:serve-ssr"
}

执行命令：npm run dev:ssr:sw

方式二：开启watch模式，支持热更新（适合日常开发）

先安装并行命令工具concurrently：

npm install -D concurrently

然后修改脚本：

"scripts": {
  ...
  "dev:ssr:sw": "concurrently \"ng build --configuration development --service-worker --watch\" \"ng run client-app:serve-ssr\""
}

执行命令：npm run dev:ssr:sw

3. 调整Service Worker配置适配开发环境

修改ngsw-config.json，确保开发模式下资源能被正确缓存：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}

同时，在浏览器的Application > Service Workers面板中开启Update on reload选项，确保SW能及时更新。

4. 验证MIME类型配置

确保Angular Universal的服务器能正确返回ngsw-worker.js的MIME类型为application/javascript。如果使用自定义Express服务器，可添加静态文件MIME类型配置：

// server.ts中
import * as express from 'express';
const app = express();

// 配置静态文件目录，确保MIME类型正确
app.use(express.static('dist/client-app/browser', {
  setHeaders: (res, path) => {
    if (path.endsWith('.js')) {
      res.setHeader('Content-Type', 'application/javascript');
    }
  }
}));

验证 #

执行修改后的dev:ssr:sw命令后，检查dist/client-app/browser目录下是否生成ngsw-worker.js文件，浏览器控制台不再出现MIME类型错误，即可正常测试PWA特性。

内容的提问来源于stack exchange，提问作者Ben5