Angular 15 sourceMap webpack-dev-middleware: unexpected token | in JSON at position 3

Question

I updated angular from 9 to 15 and now it seems I have issues running ng s with source Map enabled.

My Error:

✔ 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)

I tried to add a development configuration in my angular.json

  "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"
            }
          }
        }
      }
    }
  }

my dev dependencies:

  "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"
  }

node: 14.20.0

To ask this question, I need to provide more details, but I don't know what I could say to clarify the question further. I'm running an angular 15 app which was updated from angular 9 yesterday. I --force updated my way to 15, then updated dependencies via npm i and npm outdated. I know, Angular 15 is not using sourceMaps by default, but my problem is not to enable it, the system just isn't serving (ng s) with them enabled. Any questions welcome, I'm kinda lost here and google didn't help me as most related questions were telling me to use a development config.

Answer 1

I found the answer here: Angular 14 Unexpected token / in JSON at position 0 at makeWebpackError

Unfortunately I can't provide any more valuable information except:

This is a cheesy son of a bitch, the trace doesn't give you anything.

• Check your assets,
• run ng serve -- watch
• make a new project (same name) and copy the angular.json and package.json into your old one
• check your packages, upgrade or downgrade a version or webpack and/or angular

for me, a 2 year old unused file in the asset folder was causing the issue. it was a .map file and as all assets are loaded via http (and therefore json as default transfer), a pipe in the .map wasn't convertable.

Edit: I also had the problem that the angular.json wasn't correct after trying to fix it by hand. This I solved with point 3 above, I still don't fully understand the difference, but here's the working angular.json stub (more for me than for anyone else, sorry):

"architect": {
  "build": {
    [...]
    "configurations": {
      "production": {
        "budgets": [...]
        "outputHashing": "all"
      },
      "development": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true
      }
    },
    "defaultConfiguration": "production"
  },
  "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "myTrain:build:production"
        },
        "development": {
          "browserTarget": "myTrain:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

so i assume:

• a serve configuration for development was missing
• default configuration: development under serve - otherwise it's using production
• a development configuration architect -> build -> configurations, not in architect -> serve -> configurations

Answer 2

I've got simular error which appears from nowhere. Removing angular/.cache and node_modules/* with reinstall helps.