Angular 14开启sourceMap:true时开发构建失败：JSON解析错误

当Angular 14项目开启sourceMap: true执行开发构建时，会触发devtools-ignore-plugin的JSON解析错误，具体报错信息如下：

[error] HookWebpackError: Unexpected token / in JSON at position 0
    at makeWebpackError (C:\Users\AK\Desktop\app\cc\node_modules\webpack\lib\HookWebpackError.js:48:9)
    at C:\Users\AK\Desktop\app\cc\node_modules\webpack\lib\Compilation.js:3060:12
    at eval (eval at create (C:\Users\AK\Desktop\app\cc\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:44:1)
    at fn (C:\Users\AK\Desktop\app\cc\node_modules\webpack\lib\Compilation.js:480:17)
    at _next2 (eval at create (C:\Users\AK\Desktop\app\cc\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (C:\Users\AK\Desktop\app\cc\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:60:1)
-- inner error --

SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)
    at C:\Users\AK\Desktop\app\cc\node_modules\@angular-devkit\build-angular\src\webpack\plugins\devtools-ignore-plugin.js:42:38
    at fn (C:\Users\AK\Desktop\app\cc\node_modules\webpack\lib\Compilation.js:478:10)
    at _next2 (eval at create (C:\Users\AK\Desktop\app\cc\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (C:\Users\AK\Desktop\app\cc\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:60:1)

该错误源于JSON解析时在起始位置遇到了不允许的斜杠符号，由devtools-ignore-plugin触发。

解决方案 #

• 检查配置文件的注释规范
  JSON格式本身不支持//单行注释，若项目中的angular.json、tsconfig.json等配置文件添加了此类注释，会导致解析失败。打开这些文件，移除所有//开头的注释，若需要保留注释信息，可改用JSONC格式（需确保工具支持）或直接删除注释。

• 更新Angular构建工具包
  该问题可能是@angular-devkit/build-angular的版本bug，尝试更新到Angular 14对应的最新补丁版本：

  npm install @angular-devkit/build-angular@~14.2.10
  

• 临时移除devtools-ignore-plugin（排查用）
  通过自定义Webpack配置过滤掉该插件，步骤如下：

  1. 安装自定义Webpack构建器：

     npm install @angular-builders/custom-webpack --save-dev
     

  2. 修改angular.json中的build配置，替换builder并指定自定义配置文件：

     "projects": {
       "your-project-name": {
         "architect": {
           "build": {
             "builder": "@angular-builders/custom-webpack:browser",
             "options": {
               "customWebpackConfig": {
                 "path": "./webpack.config.js"
               },
               // 其他原有配置...
             }
           }
         }
       }
     }
     

  3. 在项目根目录创建webpack.config.js，过滤插件：

     module.exports = (config) => {
       config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'DevtoolsIgnorePlugin');
       return config;
     };
     

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