Julian P. Julian P. - 1 month ago 63
TypeScript Question

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

I used angular-cli@1.0.0-beta.10 before and now I updated to angular-cli@webpack beta.11. After a lot of custom changes I got it to work.

The only thing is that now I can not debug my angular 2 app using webstorm and chrome debugger because I don't get any ts files using ng serve. With angular-cli@1.0.0-beta.10 it was very easy to debug my app using the Jetbrains Plugin.

How can I debug my angular 2 app with Webstorm and the Chrome Debugger using ng serve?

Answer

Debugging Angular 2 App with angular-cli@webpack using Chrome Developer Tools

The new angular-cli version uses webpack which does not compile the ts files to an local directory like dist before. It uses some memory like approach.

But you can find the ts Files in the Chrome Developer Tools in the "Sources" tab and under the "webpack://" section:

The destination of the ts files in the developer tools

Debugging Angular 2 App with angular-cli@webpack using JetBrains IDE

After a long time of research and trying different variations of configuration I found a solution:

Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory to

webpack:////Users/...FULL_PATH.. //on Mac OSX

or

webpack:///C:/...FULL_PATH.. //example on Windows

You can check your Path by going to http://localhost:4200/main.map and search for any ".ts" File. You can easily copy the path of this file and paste it to your IDE Configuration Dialog.

enter image description here

EDIT: Perhaps you need to map the path adding "/src" to your src folder too. Thanks @born2net

Have Fun.