How to debug an Angular application in >>one<< click with WebStorm?

Question

Ok so I have already checked:

The solution described on the Jetbrains blog works, but there is one thing that really bothers me:

Run npm start to get the app running in the development mode. You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.

Obviously I tried to put the npm start / ng serve before the actual debug but as you may know this is actually blocking the debug phase:

It seems impossible to have both running and stopping all at once without having to start them manually separately.

Any workaround / solution?

lena · Accepted Answer · 2018-05-08T13:33:35.393

2

Adding one NPM run configuration to Before launch section won't work, as the main process will wait for return code from the process run in Before launch (and won't start until it is terminated). This is the way 'before launch' is designed - it's supposed to be used to run some sort of pre-processing before running the main process. If you need both processes to be debugged in parallel, you can try the custom Multirun plugin:

Update: since 2018.1, you can also use Compound run configuration for this. the only disadvantage (as compared to Multirun) is that it's not possible to specify the execution order and delays, so both configurations will be run simultaneously, and you will have the refresh the browser once the webpack build completes

edited May 08 '18 at 13:33

answered May 07 '18 at 14:57

lena

90,154
11
145
150

Thanks I'm gonna try this out. – Natalie Perret May 07 '18 at 15:32
is there any solution to start ng serve in Run/Debug configuration without using npm start? – Natalie Perret May 07 '18 at 16:45
no, there are no run configurations for running arbitrary commands. – lena May 08 '18 at 08:03
1

Alternatively, you can use a Compound run configuration time in WebStorm and add the JavaScript debug and npm start configurations to it. It works similarly to the Multirun plugin suggested above. – Ekaterina Prigara May 08 '18 at 09:36

How to debug an Angular application in >>one<< click with WebStorm?

1 Answers1