Angular 9升级至15后开启sourceMap运行ng s报错：JSON解析异常

问题描述 #

通过--force参数将Angular从9强制升级到15，执行npm i和npm outdated更新依赖后，开启sourceMap时运行ng s命令报错，无法正常启动开发服务。

报错信息 #

✔ Browser application bundle generation complete.
<e> [webpack-dev-middleware] HookWebpackError: Unexpected token | in JSON at position 3
<e>     at makeWebpackError ([...]\node_modules\webpack\lib\HookWebpackError.js:48:9)
<e>     at [...]\node_modules\webpack\lib\Compilation.js:3060:12
<e>     at eval (eval at create ([...]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:61:1)
<e>     at fn ([...]\node_modules\webpack\lib\Compilation.js:480:17)
<e>     at _next1 (eval at create ([...]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:58:1)
<e>     at eval (eval at create ([...]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:77:1)
<e>     at processTicksAndRejections (internal/process/task_queues.js:95:5)
<e> -- inner error --
<e> SyntaxError: Unexpected token | in JSON at position 3
<e>     at JSON.parse (<anonymous>)
<e>     at [...]\node_modules\@angular-devkit\build-angular\src\webpack\plugins\devtools-ignore-plugin.js:42:38
<e>     at fn ([...]\node_modules\webpack\lib\Compilation.js:478:10)
<e>     at _next1 (eval at create ([...]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:58:1)
<e>     at eval (eval at create ([...]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:77:1)
<e>     at processTicksAndRejections (internal/process/task_queues.js:95:5)
<e> caused by plugins in Compilation.hooks.processAssets
<e> SyntaxError: Unexpected token | in JSON at position 3
<e>     at JSON.parse (<anonymous>)
<e>     at [...]\node_modules\@angular-devkit\build-angular\src\webpack\plugins\devtools-ignore-plugin.js:42:38
<e>     at fn ([...]\node_modules\webpack\lib\Compilation.js:478:10)
<e>     at _next1 (eval at create ([...]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:58:1)
<e>     at eval (eval at create ([...]\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:77:1)
<e>     at processTicksAndRejections (internal/process/task_queues.js:95:5)

已尝试配置 #

在angular.json中添加了development环境配置：

"projects": {
    "myTrain": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myTrain",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
             },
             "development": {
               "sourceMap": {
                 "scripts": true,
                 "styles": false,
                 "hidden": true,
                 "vendor": true
                 },
              "buildOptimizer": false,
              "optimization": false,
              "extractLicenses": false,
              "namedChunks": true,
              "vendorChunk": true,
              }
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myTrain:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myTrain:build:production"
            }
          }
        }
      }
    }
  }

环境信息 #

• Node版本：14.20.0
• 开发依赖：

"devDependencies": {
    "@angular-devkit/build-angular": "^15.0.4",
    "@angular/cli": "^15.0.4",
    "@angular/compiler-cli": "^15.0.4",
    "@angular/language-service": "^15.0.4",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.2",
    "jasmine-core": "^4.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.8.4"
  }

解决方案 #

从报错栈来看，问题源于devtools-ignore-plugin.js的JSON解析错误，属于升级残留或依赖冲突问题，可按以下步骤排查解决：

1. 清理缓存并重装依赖

   • 删除node_modules、package-lock.json文件
   • 执行npm cache clean --force清理缓存
   • 重新执行npm install

2. 指定serve默认使用development环境
   修改angular.json的serve配置，默认启用development环境：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "configurations": {
       "production": {
         "browserTarget": "myTrain:build:production"
       },
       "development": {
         "browserTarget": "myTrain:build:development"
       }
     },
     "defaultConfiguration": "development"
   }
   

   之后运行ng s会自动加载development配置，也可手动指定：ng s --configuration=development

3. 临时禁用devTools插件
   在angular.json的build选项中添加devTools: false，绕过报错插件：

   "build": {
     "options": {
       // ...其他原有配置
       "devTools": false
     }
   }
   

4. 升级@angular-devkit/build-angular到15.x最新兼容版
   15.0.4存在已知bug，升级到同大版本的最新稳定版：

   npm install @angular-devkit/build-angular@^15.2.10 --save-dev
   

   确保版本与Angular CLI保持一致。

5. 同步tsconfig的sourceMap配置
   检查tsconfig.app.json，确保compilerOptions.sourceMap设为true，避免与angular.json配置冲突：

   "compilerOptions": {
     "sourceMap": true
   }
   

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