添加Service Worker后Angular项目构建PWA功能时报错如何解决？

× Service worker generation failed.
Directory import 'C:\Users\Damien\WebstormProjects\diiage\front\node_modules@angular\service-worker\config' is not supported resolving ES modules imported from C:\Users\Damien\WebstormProjects\diiage\front\node_modules@angular-devkit\build-angular\src\utils\load-esm.js

该报错是Angular生态依赖版本不兼容、依赖安装异常导致的ES模块路径解析错误，可按以下步骤排查解决：

• 校验所有核心依赖版本一致性
  检查package.json中所有@angular/前缀的依赖、@angular-devkit/build-angular、@angular/service-worker的大版本完全匹配，禁止跨大版本混用，比如全部为Angular 15.x或全部为Angular 16.x，版本差不能超过1个小版本。
• 清理后重新安装依赖
  依次执行以下命令：

  # 删除旧依赖文件夹和锁文件（Windows环境可手动删除对应文件）
  rm -rf node_modules package-lock.json
  # 清理npm全局缓存
  npm cache clean --force
  # 重新安装所有依赖
  npm install
  

• 校验PWA配置路径
  打开angular.json文件，找到build配置项，确认serviceWorker字段、ngswConfigPath字段的相对路径正确，指向的ngsw-config.json文件无JSON语法错误。
• 临时适配方案
  如果以上操作都无效，可将@angular/service-worker降级到你此前成功配置PWA的项目对应的版本，即可正常构建。

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