Starting Angular with debugger fails

Type: Bug

I am unable to get the debugger to connect to angular in debug mode, using angular v15. I am using opensuse TW with KDE desktop.

1. Create a new angular app using, ‘ng new demo’
2. Create debugger configuration (launch chrome).
3. Set a breakpoint in app.component.ts
4. Press F5

In my case the breakpoint becomes disabled (hollow circle with grey outline). The browser opens up and take a long time to show anything. The messages below are dumped in the terminal and the web-page gets displayed with no breakpoint hit.

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
WARNING: Processing source-maps of http://localhost:4200/main.js took longer than 5823.064334 ms so we continued execution without waiting for all the breakpoints for the script to be set.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
WARNING: Processing source-maps of http://localhost:4200/polyfills.js took longer than 999.4050689999995 ms so we continued execution without waiting for all the breakpoints for the script to be set.WARNING: Processing source-maps of http://localhost:4200/styles.js took longer than 999.4050689999995 ms so we continued execution without waiting for all the breakpoints for the script to be set.
[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
WARNING: Processing source-maps of http://localhost:4200/vendor.js took longer than 999.4050689999995 ms so we continued execution without waiting for all the breakpoints for the script to be set.
Angular is running in development mode. Call enableProdMode() to enable production mode.
[webpack-dev-server] Disconnected!
[webpack-dev-server] Trying to reconnect...
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/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/vendor.js: Unexpected 503 response from http://127.0.0.1:4200/vendor.js.map: connect ECONNREFUSED 127.0.0.1:4200

VS Code version: Code - Insiders 1.72.0-insider (835d39cfac9ede6c7c90678c8d6c3d4d0171ed6d, 2022-09-28T05:18:50.781Z) OS version: Linux x64 6.0.8-1-default Modes: Sandboxed: Yes

System Info

Operating System: openSUSE Tumbleweed 20221126 KDE Plasma Version: 5.26.3 KDE Frameworks Version: 5.100.0 Qt Version: 5.15.7 Kernel Version: 6.0.8-1-default (64-bit) Graphics Platform: X11 Processors: 24 × AMD Ryzen 9 5900X 12-Core Processor Memory: 62.7 GiB of RAM Graphics Processor: NVIDIA GeForce RTX 3080/PCIe/SSE2 Manufacturer: Micro-Star International Co., Ltd. Product Name: MS-7A38 System Version: 8.0

Item	Value
CPUs	AMD Ryzen 9 5900X 12-Core Processor (24 x 3999)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: disabled_software video_encode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	0, 0, 0
Memory (System)	62.72GB (54.74GB free)
Process Argv	. --crash-reporter-id 210d9130-10f4-4cf9-ad76-187d60112fd6
Screen Reader	no
VM	0%
DESKTOP_SESSION	/usr/share/xsessions/plasma5
XDG_CURRENT_DESKTOP	KDE
XDG_SESSION_DESKTOP	KDE
XDG_SESSION_TYPE	x11

Extensions (64)

Extension	Author (truncated)	Version
terraform	4op	0.2.5
vscode-base64	ada	0.1.0
vscode-tomcat	ada	0.12.1
markdown-navigation	Ala	1.0.3
Bookmarks	ale	13.3.1
aws-toolkit-vscode	ama	1.56.0
ng-template	Ang	15.0.1
vscode-apollo	apo	1.19.11
vscode-tailwindcss	bra	0.9.1
dep	car	0.1.0
npm-intellisense	chr	1.4.3
path-intellisense	chr	2.8.3
vscode-markdownlint	Dav	0.48.1
vscode-eslint	dba	2.2.6
java-decompiler	dgi	0.0.3
java-debug	DSn	0.0.2
EditorConfig	Edi	0.16.4
prettier-vscode	esb	9.9.0
java-properties	ith	0.0.2
plantuml	jeb	2.17.4
angular-file-changer	joh	0.0.4
vscode-peacock	joh	4.2.2
sort-typescript-imports	mic	1.4.1
vscode-docker	ms-	1.22.2
playwright	ms-	1.0.1
cpptools	ms-	1.12.4
live-server	ms-	0.4.4
vscode-typescript-tslint-plugin	ms-	1.3.4
angular2-inline	nat	0.0.17
vetur	oct	0.36.1
vscode-boot-dev-pack	Piv	0.1.0
vscode-manifest-yaml	Piv	1.40.0
vscode-spring-boot	Piv	1.40.0
platformio-ide	pla	2.5.5
java-ide-pack	pve	1.2.1
vscode-thunder-client	ran	2.0.2
fabric8-analytics	red	0.3.6
java	red	1.12.0
vscode-commons	red	0.0.6
vscode-xml	red	0.22.0
vscode-yaml	red	1.10.1
vue-vscode-snippets	sdr	3.1.1
markdown-preview-enhanced	shd	0.6.5
vscode-checkstyle	she	1.4.1
java-generate-setters-getters	soh	7.4.0
sonarlint-vscode	Son	3.12.0
sass-indented	syl	1.8.22
serverless-ide-vscode	Thr	0.5.34
find-then-jump	tra	2.0.5
sort-lines	Tyr	1.9.1
intellicode-api-usage-examples	Vis	0.2.6
vscodeintellicode	Vis	1.2.29
vscode-java-debug	vsc	0.46.0
vscode-java-dependency	vsc	0.21.1
vscode-java-pack	vsc	0.25.6
vscode-java-test	vsc	0.37.1
vscode-lombok	vsc	1.1.0
vscode-maven	vsc	0.39.2
vscode-spring-boot-dashboard	vsc	0.8.0
vscode-spring-initializr	vsc	0.11.1
vscode-jumpy	wma	0.3.1
better-align	wwm	1.1.6
markdown-pdf	yza	1.4.4
vscode-aspell	zap	0.1.4

(8 theme extensions excluded)

A/B Experiments

vsliv695:30137379
vsins829:30139715
vsliv368:30146709
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30422396
pythontb:30258533
vsc_aa:30263845
pythonptprofiler:30281269
vshan820:30294714
pythondataviewer:30285072
vscod805cf:30301675
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593cf:30376535
pythonvs932:30404738
cppdebug:30492333
vsclangdf:30492506
c4g48928:30535728
dsvsc012cf:30540253
pynewext54:30618038
pylantcb52:30590116
pyindex848:30611229
nodejswelcome1:30587009
pyind779:30611226
dbltrim-noruby:30604474

[rajinder-yadav]

@ringodotnl Thanks for the work-around, got the debugger working!

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

[ringodotnl]

Same issue on windows 10. @rajinder-yadav: a work-around is to serve with a host defined like: ng serve --host=127.0.0.1