How to debug an application in Angular2 using angular-cli?

Question

Does anyone know if it's possible to debug an application using angular-cli with the command line ng serve in WebStorm?. I tried the solution posted in this url:

How to debug angular 2 app using angular-cli webpack?

But it didn't work for me and I decided to make a new answer, because it's a little weird that angular-cli doesn't have some tools to do this.

Answer 1

Here is my run configuration for Angular2 (2.3) project built with angular-cli (1.0.0-beta.21)

Some things to check:

Do you have checkmarks shown in your breakpoints once the debugger is started and application loaded?

if not, seems sourcemaps are not loaded for some reason. Check if the mappings are correct: open http://localhost:4200/main.bundle.map in browser, see what URLs in "sources": look like. If you see smth like

"webpack:////User/devuser/Develop/MyWebApp/src/app/index.ts"

then URL mappings for root would be

webpack:////User/devuser/Develop/MyWebApp

If you see that the relative paths are used, change URL mappings accordingly.

If finally you can see the checkmarks, try refreshing browser page (important!!!) - are any of breakpoints hit?

If you manage to get sourcemaps loaded (you can see checkmarks, at least some breakpoints are hit on browser refresh) - you are done:) Your WebStorm configuration is now correct