WebStorm doesn't hit breakpoints in Angular CLI app

Question

I am using WebStorm 2019.1.1 Build #WS-191.6707.60, built on April 16, 2019. I am attempting to debug an Angular application that is based on Angular 5.2. I followed the instructions on JetBrains support website as well as numerous YouTube videos but it looks like the debugger never runs or hits my breakpoint.

I setup my run/debug configuration as shown in the screen capture below. I am using the default Angular CLI configuration pointing to localhost:4200. The instructions at JetBrains support website say to launch the app via the green triangular "play" button and then once the app is running then click the "bug" icon next to the play button. This pops up a dialog warning that the project is not allowed to run in parallel (of which I cancel out). I have also tried just clicking the "bug" icon, and though the project compiles via webpack and runs it never stops at the breakpoints I set in WebStorm.

Debugging within Chrome using the dev tools works just fine and the breakpoints I set there work fine, however I really would like to be able to do the debugging inside of WebStorm.

The instruction also mention that WebStorm creates a default Angular Application configuration but I don't see one being created.

I had this process working before when using the evaluation of WebStorm but after I bought a license and reinstalled WebStorm it no longer works. Any thoughts or suggestions?

Answer 1

You have Angular Application run configuration above npm group in JavaScript Debug but in your case it's collapsed.

If you don't have it there it looks like this: