Angular 8项目添加@angular/pwa时模块构建失败问题求助

针对你在多子项目Angular 8应用中添加@angular/pwa遇到的一系列问题，我整理了针对性的解决方案，一步步来排查修复：

1. 清理残留的错误配置 #

首先，先彻底清理之前尝试添加PWA时留下的混乱配置：

• 移除根项目的PWA依赖：

  ng remove @angular/pwa
  

• 检查子项目app1的angular.json配置，删除任何与PWA相关的错误条目（比如根项目残留的serviceWorker配置）；同时确认app1的app.module.ts中只保留正确的ServiceWorkerModule导入（如果之前有错误添加的话）。

2. 正确给子项目添加PWA配置 #

重新给指定子项目添加PWA，确保CLI正确识别子项目路径：

ng add @angular/pwa --project app1

执行完命令后，检查以下几个关键配置：

• angular.json中app1的构建配置：确认architect.build.options下存在以下配置：

  "serviceWorker": true,
  "ngswConfigPath": "projects/app1/src/ngsw-config.json"
  

  （如果ngsw-config.json被生成在projects/app1根目录，需要把ngswConfigPath改成projects/app1/ngsw-config.json）
• app.module.ts的注册路径：确保注册代码是：

  ServiceWorkerModule.register('/ngsw-worker.js', { 
    enabled: environment.production,
    // 如果你的子项目部署在子路径下，比如/app1，需要改成'/app1/ngsw-worker.js'
  })
  

3. 修复ngsw-config.json的Schema路径提示问题 #

你看到的"无法加载schema文件"是IDE的路径解析问题，实际CLI构建不会受影响，但如果想消除提示：

• 把ngsw-config.json移动到projects/app1/src目录下（这是更规范的位置）
• 修改文件内的schema路径为：

  "$schema": "../node_modules/@angular/service-worker/config/schema.json"
  

  同时更新angular.json中的ngswConfigPath为projects/app1/src/ngsw-config.json

4. 确保ngsw-worker.js正确生成 #

之前找不到ngsw-worker.js的核心原因是你可能没有指定子项目进行构建，执行以下命令构建子项目：

ng build --prod --project app1

构建完成后，检查dist/app1目录下，应该会生成ngsw-worker.js和ngsw.json文件——这两个文件是CLI自动生成的，不需要手动创建。

5. 验证运行 #

构建完成后，用本地服务器（比如http-server dist/app1）启动子项目的生产构建包，Chrome控制台的Cannot read property 'id' of undefined错误会消失，因为此时ServiceWorker可以正确找到ngsw-worker.js文件并加载。

关键注意点 #

• Angular 8的多子项目PWA配置必须明确指定--project参数，否则CLI会默认给根项目添加配置，导致子项目依赖路径混乱；
• 构建时必须指定子项目，否则CLI不会为子项目生成PWA相关的worker文件；
• 如果子项目部署在域名的子路径下，一定要修改ServiceWorkerModule.register中的路径，确保worker文件能被正确访问。

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