Angular 12运行ng serve时报manifest.json缺失404错误怎么解决？

报错根因 #

两个报错为关联问题：manifest.json 404是因为项目缺少该文件且未配置静态资源映射，浏览器请求失败时Angular会默认返回index.html的HTML内容，浏览器将HTML内容作为JSON解析就会抛出语法错误。

方案1：不需要PWA功能（最简解决） #

直接打开项目src/index.html文件，删除head标签内的manifest引用代码即可：

<link rel="manifest" href="manifest.json">

修改后重启ng serve，报错即可消失。

方案2：需要保留PWA功能 #

方式A：自动配置（推荐） #

直接在项目根目录执行Angular CLI内置的PWA配置命令，会自动生成所有需要的文件和对应配置：

ng add @angular/pwa

执行完成后重启服务即可。

方式B：手动配置 #

• 在src/目录下新建manifest.json文件，填入基础配置（可根据实际需求修改参数）：

{
  "name": "你的应用名称",
  "short_name": "应用短名",
  "theme_color": "#1976d2",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

• 打开angular.json配置文件，找到projects > 你的项目名 > architect > build > options > assets数组，新增manifest.json的路径配置：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/manifest.json"
]

• 重启ng serve即可生效。

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