如何在Nx Monorepo中为Angular应用配置PWA？

原生ng add @angular/pwa命令在Nx Monorepo中无法自动识别目标项目，改用Nx专属的PWA生成器即可解决，具体步骤如下：

• 使用Nx PWA生成器初始化配置
  执行命令指定你的Angular项目名称（替换your-angular-project为实际项目名）：

  nx generate @nrwl/angular:pwa --project=your-angular-project
  

  该命令会自动完成以下操作：

  • 安装@angular/pwa依赖包
  • 在项目的angular.json中启用Service Worker（设置architect.build.options.serviceWorker: true）
  • 添加manifest.json到项目资源，并在index.html中引入
  • 生成PWA所需的默认图标文件到项目assets/icons目录

• 自定义PWA配置
  编辑项目根目录下的ngsw-config.json，可以根据需求调整缓存策略、添加自定义路由规则、配置离线页面等。

• 验证配置有效性

  1. 构建生产版本：

     nx build your-angular-project --prod
     

  2. 启动本地服务器预览构建产物（替换路径为你的实际构建输出目录）：

     npx http-server dist/apps/your-angular-project
     

  3. 在浏览器开发者工具的「Application」标签下，检查Service Worker是否注册成功、Manifest是否正常加载。

• 常见问题排查

  • 确保@nrwl/angular依赖版本与项目中Angular版本兼容
  • 检查angular.json中目标项目的architect.build.options.assets是否包含manifest.json和图标目录
  • 若Service Worker未生效，确认构建命令使用了--prod参数（开发环境默认不启用Service Worker）

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