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

first move is conforming to the version guide angular.io/guide/versions before trying anything else — ashubuntu
– ashubuntu, Commented Sep 11, 2023 at 13:48

Branislav Kockica · Accepted Answer · 2023-02-19 10:48:59Z

67

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, 2023 at 10:48

answered Jun 28, 2022 at 19:27

Branislav Kockica

7086 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Paul Over a year ago

I downgraded to node 16 LTS, works fine now

caleba Over a year ago

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

Thiemo Over a year ago

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

Cristian Over a year ago

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"

g.pickardou Over a year ago

Exactly, this is a life saver.

|

Nik · Accepted Answer · 2022-12-14 09:37:25Z

22

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, 2022 at 9:37

Nik

2312 silver badges3 bronze badges

4 Comments

John Over a year ago

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

KEMBL Over a year ago

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

Movahhedi Over a year ago

Works like a charm. This should be the accepted answer. I had no issues with breakpoints, but I'll keep that in mind.

user861446 Jun 30 at 14:20

Did not work. With this change breakpoints are not getting set.

pdog · Accepted Answer · 2023-02-25 04:18:47Z

12

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, 2023 at 4:18

answered Feb 25, 2023 at 4:17

pdog

1211 silver badge5 bronze badges

1 Comment

Yaroslav Larin Over a year ago

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

Evgenii Shmanev · Accepted Answer · 2022-07-20 18:02:14Z

10

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.

answered Jul 20, 2022 at 18:02

Evgenii Shmanev

8317 silver badges12 bronze badges

Comments

starball · Accepted Answer · 2023-03-19 19:53:12Z

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

Tyler2P · Accepted Answer · 2022-11-18 17:16:16Z

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, 2022 at 17:16

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Nov 16, 2022 at 10:40

Gregor

831 silver badge7 bronze badges

2 Comments

reza hrkeng Over a year ago

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

Sebastian Correa Zuluaica Over a year ago

You saved me, I was already worrying.

Rafael Neto · Accepted Answer · 2023-01-05 10:58:48Z

2

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.

answered Jan 5, 2023 at 10:58

Rafael Neto

1,32014 silver badges16 bronze badges

Comments

Kosi · Accepted Answer · 2023-03-22 10:18:20Z

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, 2023 at 10:18

answered Mar 22, 2023 at 10:16

Kosi

211 silver badge4 bronze badges

Comments

Michael · Accepted Answer · 2022-05-12 07:23:30Z

1

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

answered May 12, 2022 at 7:23

Michael

3,6824 gold badges27 silver badges39 bronze badges

1 Comment

Paul Over a year ago

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

iulo · Accepted Answer · 2023-02-10 15:14:29Z

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, 2023 at 15:14

iulo

1613 silver badges4 bronze badges

1 Comment

iulo Over a year ago

The --open flag is optional, of course.

DungGramer · Accepted Answer · 2023-05-09 08:47:23Z

1

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

answered May 9, 2023 at 8:47

DungGramer

2,4061 gold badge11 silver badges15 bronze badges

Comments

MiguelG · Accepted Answer · 2024-10-29 19:58:58Z

1

I had to downgrade the vscode version from 1.95 to 1.94. This fixed the issue in my case. It seems to be related with a bug from the vscode side too.

answered Oct 29, 2024 at 19:58

MiguelG

4815 silver badges19 bronze badges

1 Comment

gene b. Over a year ago

I'm having the same issue after an upgrade to 1.95.2. I can no longer do Launch Chrome (workspace), it hangs and there's the error Could not read source map for runtime.js: NOENT: no such file or directory, open runtime.js.map. It does work against yarn start but not yarn dev. I have a related thread: stackoverflow.com/questions/79189786/…

WesFanMan · Accepted Answer · 2023-06-23 12:16:52Z

0

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

edited Jun 23, 2023 at 12:16

answered Jun 23, 2023 at 12:10

WesFanMan

1233 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

13 Answers 13

14 Comments

4 Comments

1 Comment

Comments

Cause

Solution

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

14 Comments

4 Comments

1 Comment

Comments

Cause

Solution

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related