Why am I suddenly getting “Could not read source map” in VSCode using Angular with NodeJS 17 and above?

I actually had the same problem (using Angular 14 with NX).
The debugger would work on node 16 but not on node 18.

What made it work is adding the flag ‘–host=127.0.0.1’ to the start script in package.json.

"start": "ng serve --host=127.0.0.1"

My launch json:

 "version": "0.2.0",
  "configurations": [
    
    {
      "name": "Debug Frontend",
      "type": "pwa-chrome",
      "request": "launch",
      "preLaunchTask": "Serve Frontend",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/src/*",
        "/*": "*",
        "/./~/*": "${workspaceFolder}/node_modules/*"
      }
    }

My tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Serve Frontend",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    }
  ]
}

Edit:
If you are using NX, you need to change the name of your script in tasks.json to match your package.json, as well as need to add the host to the start script in package.json:

"start:frontend": "nx serve frontend --host=127.0.0.1"