NX项目执行ng build后dist目录未生成ngsw-worker.js该如何解决？

架构老林

2026-8-9

NX项目Angular Service Worker未生成问题的解决办法

确认项目已添加PWA支持
检查是否针对目标项目执行过PWA初始化命令：
```
nx add @angular/pwa --project appname
```
该命令会自动配置ngsw-config.json、项目构建配置及ServiceWorker注册逻辑，若未执行过，先运行此命令完成基础配置。
检查项目构建配置
打开project.json（或angular.json），找到对应appname的构建配置节点，确认architect.build.options中包含以下配置：
```
"serviceWorker": true,
"ngswConfigPath": "apps/appname/ngsw-config.json"
```
路径需与实际项目结构匹配，若缺失则手动添加。

验证ngsw-config.json配置
确保项目目录下存在ngsw-config.json，且配置结构完整，示例基础配置如下：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.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)"
        ]
      }
    }
  ]
}

检查生产环境变量配置
打开src/environments/environment.prod.ts，确认环境变量包含：
```
export const environment = {
  production: true,
  serviceWorker: true
};
```
Angular会优先读取环境变量中的ServiceWorker开关配置，需确保生产环境下该值为true。
使用生产环境构建命令
Service Worker默认仅在生产构建时生成，需执行指定生产配置的构建命令：
```
nx build appname --configuration production
```
避免直接执行无配置参数的ng build appname（默认使用开发配置，不启用Service Worker）。
清理缓存后重新构建
先删除dist目录，清理依赖缓存后重新构建：
```
rm -rf dist
npm ci
nx build appname --configuration production
```