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

Question

I suddenly can't debug my Angular Application. Not quite sure what I did. It might have happen after I updated node.js

• Angular: 13.1.1
• NodeJS: 18.1.0
• VSCode: 1.67.1

Launch.json

"configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
    },
  ]

Errors:

Could not read source map for http://localhost:4200/runtime.js: Unexpected 503 response from http://127.0.0.1:4200/runtime.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/vendor.js: Unexpected 503 response from http://127.0.0.1:4200/vendor.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/main.js: Unexpected 503 response from http://127.0.0.1:4200/main.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/styles.js: Unexpected 503 response from http://127.0.0.1:4200/styles.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/polyfills.js: Unexpected 503 response from http://127.0.0.1:4200/polyfills.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/scripts.js: Unexpected 503 response from http://127.0.0.1:4200/scripts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/common.js: Unexpected 503 response from http://127.0.0.1:4200/common.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/common.js: Unexpected 503 response from http://127.0.0.1:4200/common.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_lora_lora_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_lora_lora_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_telegrams_telegrams_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_telegrams_telegrams_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_items-management_items-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_items-management_items-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_model-management_model-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_model-management_model-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_key-management_key-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_key-management_key-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/default-src_app_model-management_services_items_service_ts-src_app_model-management_services_-687318.js: Unexpected 503 response from http://127.0.0.1:4200/default-src_app_model-management_services_items_service_ts-src_app_model-management_services_-687318.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_gum_gum_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_gum_gum_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_biot_biot_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_biot_biot_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200

Draghound

first move is conforming to the version guide angular.io/guide/versions before trying anything else – Bildungsroman

Answer 1

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"

Antisepticize

I downgraded to node 16 LTS, works fine now – Balladmonger

Adding --host=127.0.0.1 as suggested worked, and I want to know why! – Leeke

I have struggled with this problem for months and couldn't find a solution, this finally solved it - thank you! I'm with calebTree8475 though, I'd really like to know what changed between the Node versions that broke this... – Mikkel

@Mikkel This is a guess, but I think Angular (CLI) 14 was written for node 16, so there must be some incompatibility stemming from there. Source – Antisepticize

Node v16.18.1 is the latest LTS working version so far. – Introrse

It works with node v18.12 thanks! But with your launch json and your tasks.json you need to add in package.json this line: "start:frontend": "ng serve --host=127.0.0.1" – Anywhere

Adding --host worked for me on node v18.12.1 – Draghound

@BranislavKockica how did you solve this with nx? I want to use the nx command and i can not pass the argument to nx serve... – Sheikdom

@BenjaminMartin I added it to the start script in package.json: start:frontend": "nx serve frontend --host=127.0.0.1" – Antisepticize

Exactly, this is a life saver. – Poesy

Saved my day (and my project)! – Agram

Going down to v16 and back up to 18 fixed it for me. – Sickly

This is scandalous for such developed system to have such issues. Seriously. I wasted today 3 hours looking for this solution. Works perfectly! – Middleoftheroad

Answer 2

I've found a simpler solution here.

With VSCode 1.74.0, Angular 14 and NodeJS 18 I simply added the resolveSourceMapLocations property to my launch.json:

{
   "name": "Chrome debug",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "preLaunchTask": "starter",
    "sourceMaps": true,
    "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
    ],
}

No need to update the package.json serve configuration.

Daimon

adding resolveSourceMapLocations prevents being able to hit breakpoints for me. Not sure about that solution for this issue. – Onehorse

@Onehorse had this problem, was solved after removing of "${workspaceFolder}/**" – Radius

Answer 3

It appears that in node v18 localhost resolves to an ipv6 address instead of ipv4 in v16. In the browser localhost will resolve to ipv4 and the angular node server errors out.

On v18 you can put an ipv6 address:

"configurations": [
{
  "name": "ng serve",
  "type": "chrome",
  "request": "launch",
  "url": "http://[::1]:4200/"
},

and it should work

https://github.com/nodejs/node/issues/40537

Fled

This should be the accepted answer because it explains the reason behind this bug and deals directly with it – Adjudge

Answer 4

I have recently faced the same problem, which I could manage out by adding the suggested line: "start": "ng serve --host=127.0.0.1"

It worked. However, I had to remember starting ng with the explicit host each time I wanted to debug. I ran "ng version" and suddenly the command complained that Angular did not support Node.js v.18!

I have uninstalled Node.js v.18 and then installed v.16. That has completely fixed the problem.

Mestas

Answer 5

Cause

The default value of the --dns-result-order flag changed in NodeJS v17 from ipv4first to verbatim. Here's the PR that made the change: dns: default to verbatim=true in dns.lookup() #39987.

This change in behaviour was noticed in this issue ticket: "localhost" favours IPv6 in node v17, used to favour IPv4 #40537. The change is mentioned in the changelog under "Other Notable Changes".

Solution

You have a few options:

• Check your hosts file. If it's missing ::1 localhost, adding that might solve the issue.

• Pass --dns-result-order=ipv4first to your node process.

• Change your VS Code debugging launch config to open the IPv6 loopback address ([::1]) explicitly.

• Specify the desired host explicitly in the ng serve command (ng serve --host=127.0.0.1).

Ellata

Answer 6

My system: Ubuntu 22, node 18.11

I figured out, it depends on two things: node version or host ip

I switched to node 16.18, and it worked.

It depends also not on my launch.json config. "sourceMaps" is not needed:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9222
    }
  ]
}

Another fix (using node 18) is modify package.json:

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

Instead of:

"start": "ng serve",

Twentieth

finally someone told where "start": "ng serve --host=127.0.0.1", placed in! all said change ("start": "ng serve") to ("start": "ng serve --host=127.0.0.1").BUT not said where it is. lunch.js OR package.js OR WHERE????? only one was you.thanks – Butyl

You saved me, I was already worrying. – Britain

Answer 7

I have been working in parallel these last years in Angular projects created from version 7 to the most current and there is something that I have learned.

The version we use of Angular and Nodejs must be aligned.

Check out this helpful answer about compatibility between Angular CLI, Angular, Node.js, TypeScript and RxJS version compatibilities.

Letters

Answer 8

You can follow this open issue's thread if you are using VSCode. Now, this issue is still lingering because of a bug in the DNS resolution fallback logic in VSCode.

Forcing the devserver to 127.0.0.1 is the only workaround for now.

The github issue: https://github.com/microsoft/vscode/issues/167353 This issue is phrased as angular related, but it's Webpack's devserver in general.

Cologne

Answer 9

I downgraded NodeJS to version 14.19.x which fixed the issue for me.

Draghound

node 18 didn't work for me downgraded to node 16 now it works – Balladmonger

Answer 10

Changing settings on files didn't work for me, but running the app with the following comand solved the problem:

ng serve --host=127.0.0.1 --open

Ethnomusicology

The --open flag is optional, of course. – Ethnomusicology

Answer 11

Try once of both solution!

launch.json

"resolveSourceMapLocations": [
  "${workspaceFolder}/**",
  "!**/node_modules/**"
],

webpack.config.js

output: {
  devtoolModuleFilenameTemplate: (info) => {
    if (process.env.NODE_ENV === 'production') {
      return `webpack:///${info.resourcePath}`;
    } else {
      return 'file:///' + encodeURI(info.absoluteResourcePath);
    }
  },
},

Reader

Answer 12

Worth noting is the impact to a CORS proxy.config.json. Updating your VS Code launch.json to IPV6 as below (per pdog and starball):

"configurations": [
{
  "name": "ng serve",
  "type": "chrome",
  "request": "launch",
  "url": "http://[::1]:4200/"},
  ...

will break an existing IPV4 oriented CORS proxy. You will need to add "changeOrigin" to the config if your services run on IPV4.

{
  "/api": {
    "target": "https://localhost:44371",
    "secure": false,
    "pathRewrite": {"^/api": ""},
    "changeOrigin": true
  }
}

Sniffle

Answer 13

It may sound unrelated but my solution to this problem was to remove the breakpoint I added by mistake. You can keep that in mind.

Trenttrento

Don't get it. I need the source maps, to debug my code in VS code – Draghound