为现有Angular项目添加@angular/pwa后部署服务器遇Manifest错误求助

这个错误Manifest: Line: 1, column: 1, Unexpected token通常意味着浏览器拿到的manifest.json内容不是有效的JSON，大概率是部署环节出了问题——毕竟你本地生产模式运行正常，说明本地构建的文件是没问题的。下面是几个常见的排查方向：

1. 确认服务器能正确返回manifest.json文件 #

直接在浏览器地址栏访问你的部署域名+/manifest.json（比如https://your-domain.com/manifest.json），看看返回的内容：

• 如果显示的是404页面、服务器错误页或者其他非JSON内容，那说明文件没被正确部署到服务器上，或者你在index.html里写的路径不对。
  • 你当前用的是<link href="manifest.json">相对路径，如果你的应用部署在服务器的子目录下，得改成绝对路径<link href="/manifest.json">；如果子目录是/app，就写成<link href="/app/manifest.json">。
  • 也可以检查部署脚本，确认manifest.json被正确复制到了服务器的静态文件目录里。

2. 检查服务器的MIME类型配置 #

浏览器需要服务器返回正确的MIME类型才能正确解析manifest文件，它的标准类型是application/manifest+json，如果服务器没配置这个，可能会返回默认的text/plain或者其他类型，导致解析失败。

• Nginx：在你的站点配置里添加或修改types块：

  types {
      application/manifest+json json;
  }
  

• Apache：在项目的.htaccess文件里添加：

  AddType application/manifest+json .json
  

• IIS：在站点的MIME类型设置里添加扩展名.json，类型为application/manifest+json。

3. 校验manifest.json的语法完整性 #

虽然本地正常，但不排除部署过程中文件被意外篡改（比如压缩工具出错、上传时文件损坏）。把服务器返回的manifest.json内容复制出来，用本地编辑器的JSON语法检查功能确认有没有语法错误——比如遗漏的逗号、未闭合的引号、多余的括号之类的小问题。

4. 额外检查：Service Worker的路径匹配 #

虽然当前报错是manifest的，但顺便提一句：你的sw-register.js里注册的/ngsw-worker.js是绝对路径，要确保服务器根目录下确实存在这个文件，否则后续Service Worker也会注册失败。

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