Breakpoints not binding in VS Code debugger with inline source maps from Angular's esbuild builder

[ggariepy-proton]

Describe the bug

When using Angular's @angular-devkit/build-angular:browser-esbuild builder (default in recent Angular versions), source maps are always generated inline. This causes breakpoints set in original TypeScript files to not bind correctly in the VS Code JavaScript Debugger (built-in Chrome/Edge debugger). However, the same inline source maps work perfectly when debugging directly in Chrome DevTools (F12).
This is a limitation specific to VS Code's handling of inline source maps from esbuild, as switching back to the webpack builder (@angular-devkit/build-angular:browser) resolves the issue but sacrifices build speed.

To Reproduce

1. Create a new Angular project: ng new test-app --ssr=false.
2. Ensure the builder is set to esbuild in angular.json (default in Angular 17+).
3. Add a simple component or edit app.component.ts with a method where you can set a breakpoint (e.g., in ngOnInit).
4. Serve the app: ng serve.
5. In VS Code, use a standard launch.json configuration to attach the Chrome debugger (e.g., { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:4200", "webRoot": "${workspaceFolder}" }).
6. Set a breakpoint in the TS file and trigger it—the debugger skips or doesn't hit the breakpoint in the source-mapped file.
7. Open the same app in Chrome DevTools directly—breakpoints work as expected.

Log File
Emailed to connor@xbox.com

VS Code Version:
1.107.0

Additional context
This is a large Angular app just migrated to ESBuild. Previously, with webpack, everything worked fine debugging through VSCode.