[BUG] - Cannot hit breakpoints with `ng serve` if Node 18 LTS is used

[Franiac]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Node 16 LTS

Description

When using Node 18 (LTS), a newly created project cannot hit any breakpoints (greyed out). The debugger gets attached correctly, but in VSCode no breakpoints are active. When downgrading to Node 16 (LTS), everything works out of the box as it should be.

You can make Node 18 work by adding --host=127.0.0.1 to the ng serve command. Then breakpoints get hit. I feel, one should not need to do this on newly creatd projects with the CLI.

Does not seem to be an issue directly with the CLI but maybe dev-server or Node itself, but it definitely affects CLI and the default projects are therefor broken (cannot be debugged).

Minimal Reproduction

Not working:

• ng new BreakTest (no routing, SCSS styles)
• Add breakpoint in app.component.ts line 9 (or any other valid line in any source file)
• Start debugging in Chrome

Working:

• ng new BreakTest (no routing, SCSS styles)
• Add breakpoint in app.component.ts line 9 (or any other valid line in any source file)
• In package.json add --host=127.0.0.1 to ng serve command
• Start debugging in Chrome

Exception or Error

All breakpoints are greyed out and do not get hit with Node 18

Your Environment

Angular CLI: 15.1.2
Node: 18.13.0
Package Manager: npm 8.19.3
OS: win32 x64

Angular: 15.1.0
... animations, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.1
@angular-devkit/build-angular   15.1.1
@angular-devkit/core            15.1.1
@angular-devkit/schematics      15.1.2
@angular/cli                    15.1.2
@schematics/angular             15.1.2
rxjs                            7.8.0
typescript                      4.9.4

Anything else relevant?

Potentially related issues:

#24442
#23383

[alan-agius4]

Node.js 18 no longer prefers IPv4 over IPV6 Instead, it will now respect the order that is returned based on the dns entries. This means that it's not guaranteed that localhost is resolved to 127.0.0.1. See: nodejs/node#39987

VSCode seem to have a problem and is incorrectly resolving localhost to 127.0.0.1 instead of ::1. See:
microsoft/vscode#167353
microsoft/vscode-js-debug#1491

As a workaround you also update the host file to remove duplicate localhost entries.

[alan-agius4]

Closing as this is not an issue caused by the Angular CLI. Please subscribe to microsoft/vscode#167353 for updates.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}