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

Branislav Kockica · Accepted Answer · 2023-02-19T10:48:59.383

62

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"

edited Feb 19 '23 at 10:48

answered Jun 28 '22 at 19:27

Branislav Kockica

648
5
7

3

I downgraded to `node 16 LTS`, works fine now – Paul Sep 10 '22 at 14:45
10

Adding `--host=127.0.0.1` as suggested worked, and I want to know why! – calebTree8475 Oct 05 '22 at 18:49
3

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... – Thiemo Oct 31 '22 at 07:33
1

@Thiemo 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](https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3) – Branislav Kockica Nov 10 '22 at 22:02
1

Node v16.18.1 is the latest LTS working version so far. – Reza Taba Dec 05 '22 at 01:17
3

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" – Cristian Dec 21 '22 at 12:24
1

Adding --host worked for me on node v18.12.1 – Michael Jan 03 '23 at 11:27
1

@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... – Benjamin Martin Jan 26 '23 at 09:54
1

@BenjaminMartin I added it to the start script in package.json: start:frontend": "nx serve frontend --host=127.0.0.1" – Branislav Kockica Jan 26 '23 at 21:09
2

Exactly, this is a life saver. – g.pickardou Feb 11 '23 at 11:52
1

Saved my day (and my project)! – MartinM43 Mar 08 '23 at 12:11
Going down to v16 and back up to 18 fixed it for me. – JavaProScript Mar 21 '23 at 13:18

score 10 · Answer 2 · answered Dec 14 '22 at 09:37

10

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.

answered Dec 14 '22 at 09:37

Nik

101
1
3

2

adding resolveSourceMapLocations prevents being able to hit breakpoints for me. Not sure about that solution for this issue. – John Jan 03 '23 at 18:44
This worked like a charm for me. – Tom Stambaugh Sep 01 '23 at 20:26

score 9 · Answer 3 · answered Jul 20 '22 at 18:02

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.

pdog · Answer 4 · 2023-02-25T04:18:47.327

8

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

edited Feb 25 '23 at 04:18

answered Feb 25 '23 at 04:17

pdog

81
1
3

2

This should be the accepted answer because it explains the reason behind this bug and deals directly with it – Yaroslav Larin Mar 15 '23 at 18:01

score 5 · Answer 5 · edited Nov 18 '22 at 17:16

5

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

edited Nov 18 '22 at 17:16

Tyler2P

2,324
26
22
31

answered Nov 16 '22 at 10:40

Gregor

73
1
7

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 – reza hrkeng Jan 25 '23 at 04:45
You saved me, I was already worrying. – Sebastian Correa Zuluaica Mar 13 '23 at 02:33

score 5 · Answer 6 · answered Mar 19 '23 at 19:53

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

Kosi · Answer 7 · 2023-03-22T10:18:20.010

2

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.

edited Mar 22 '23 at 10:18

answered Mar 22 '23 at 10:16

Kosi

21
1
4

score 1 · Answer 8 · answered May 12 '22 at 07:23

1

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

answered May 12 '22 at 07:23

Michael

3,350
2
21
35

`node 18` didn't work for me downgraded to `node 16` now it works – Paul Sep 10 '22 at 14:45

score 1 · Answer 9 · answered Jan 05 '23 at 10:58

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.

score 1 · Answer 10 · answered Feb 10 '23 at 15:14

1

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

answered Feb 10 '23 at 15:14

iulo

91
1
4

The --open flag is optional, of course. – iulo Feb 10 '23 at 15:17

score 0 · Answer 11 · answered May 09 '23 at 08:47

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);
    }
  },
},

WesFanMan · Answer 12 · 2023-06-23T12:16:52.243

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

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

12 Answers12

Cause

Solution

Linked