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

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

I finally got it working! I am documenting it here for myself and others to help in the future.

Note: Tested with Angular v6

Steps:

1. Install JetBrains IDE Support chrome extension
2. Go to options and set port 63342 (NOT 4200) as follows:
3. Now in webstorm IDE, go to run > Edit configuration.
4. Click on + button select Javascript Debug and add setting as shown in below image, then click apply button.
5. Go to Settings > Build, execution and deployment > debugger and set as follows:
6. Run debugger (run > debug )
7. Run ng serve like you would normally do in cmd/terminal.
8. Run http://localhost:4200/ in Chrome
9. Now you can set breakpoints within webstorm IDE and debug.