Angular V14.2 PWA问题：ngsw-worker.js语法错误及Service Worker未激活

核心原因分析 #

这个错误本质是浏览器加载的ngsw-worker.js并非合法的JavaScript文件，大概率是服务器返回了HTML（如404页面）、空白内容或其他非JS文本，导致解析失败，进而Service Worker无法激活。

具体排查与解决步骤 #

• 直接验证ngsw-worker.js内容
  在浏览器地址栏直接访问/ngsw-worker.js，查看返回内容：

  • 如果是HTML页面（比如404提示），说明服务器未正确映射静态文件，或路由配置拦截了该文件的请求。
  • 如果是乱码/空白，检查构建产物中是否生成了正确的ngsw-worker.js文件。

• 确认PWA配置正确性

  • 检查AppModule中的注册代码：确保ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })配置正确，注意开发环境默认禁用Service Worker，需在生产构建后测试。
  • 核对angular.json中的ngswConfigPath，确保指向正确的ngsw-config.json文件，无路径拼写错误。

• 清理缓存并重新构建部署

  • 执行生产构建命令：ng build --configuration production（Angular 14标准生产构建命令），确认dist目录下生成了ngsw-worker.js和ngsw.json文件。
  • 在浏览器开发者工具的Application→Service Workers菜单中点击Unregister卸载旧的Service Worker，勾选Network面板的Disable cache后刷新页面。

• 服务器配置检查

  • 确保服务器为ngsw-worker.js设置正确的MIME类型：application/javascript，避免因类型错误导致解析失败。
  • 若部署在非根路径，需在ngsw-config.json中配置scope字段，并确保服务器配置了Service-Worker-Allowed HTTP头，匹配对应的作用域。

• 校验ngsw-config.json合法性
  检查ngsw-config.json的JSON语法是否正确（比如引号、逗号是否匹配），assetGroups/dataGroups的配置是否符合Angular PWA规范，语法错误会导致生成的ngsw-worker.js无效。

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