Chrome annoyingly opens a corresponding line in main.bundle.ts every time I add a breakpoint in a .ts file

Question

I'm developing an Angular (v4.3.5) SPA, serving it with Angular CLI's ng serve command and debugging it through Chrome Developer Tools. Last week something strange started to happen and I can't seem to do anything to change it to the way it was before: in Chrome Dev Tools, when I click on the line number to add a breakpoint in my .ts files, Chrome Dev Tools also open the corresponding line in main.bundle.ts, so now every single time I add a breakpoint I have to close main.bundle.ts or click back on the title of .ts file. It's very annoying. Is there a new change in default settings or something? Because I couldn't find anything related to that (although I'm not even sure how to google this issue...)

So my question is: what can I do to force Chrome not to open main.bundle.ts every time I add a breakpoint?

EDIT: I just found out this issue happens only when I run ng serve from Visual Studio Code terminal.

Answer 1

This worked for me (chromeDevTools):

Map webpack://./ to / in your project workspace