Cannot Debug Angular 15 app in VS Code on Windows

Question

I upgraded an existing project to Angular 15 and now I can't debug: "Some of your breakpoints could not be set".

On clicking "troubleshoot your launch configuration" against the unbound breakpoint, and then "Why don't my breakpoints bind", I see

"We couldn't find a corresponding source location, and didn't find any source with the name app.component.ts."

plus

"Make sure you have "sourceMap": true in your tsconfig to generate sourcemaps."

But this is already the case:

    "sourceMap": true,

Other StackOverflow solutions suggest the same: Debug with Visual Studio Code not working

I've restarted VS Code, rebooted the PC, re-installed global Angular cli (15.0.4) and created a completely new project. I still can't hit a breakpoint.

This post https://stackoverflow.com/questions/56535916/my-angular-application-doesnt-hit-breakpoint-when-debugging/67704997#67704997:~:text=Angular%20CLI%3A%2014.2.6%0ANode%3A%2018.12.1%20(Unsupported) advises node 18.12.1 is unsupported for Angular 14, but on viewing my Angular version there's no warning that node v18.12.1 is unsupported by Angular 15

    Angular CLI: 15.0.4
    Node: 18.12.1

Another suggestion is to append src to the workspaceFolder against webroot in launch.json https://stackoverflow.com/a/63730484/1830758 but that hasn't resolved the issue

As this has been reproduced against a new project after reinstalling global Angular CLI, I guess the unmodified config would have to be correct and I must have some other environmental issue?

Answer 1

Debugging can be restored by downgrading Node to v16.19.0

Answer 2

Why am I suddenly getting "Could not read source map" in VSCode using Angular with NodeJS 17 and above? solved it exactly. Issue was with node 18. This allowed me not to have to downgrade.

change your serve command to ng serve --host=127.0.0.1