how to debug angular 2 source code typescript files

Question

Could anyone point out how to debug angular 2 source code typescript files in chrome. webpack serve the typescript files of the angular project (files contained inside the "src" folder in an angular project)

but does not serve the typescript files of angular source code.

Answer 1

May be this will help. You cant directly add your break point in to any import statement. But there is an alternative.

Step 1: In your project integrated terminal ng s or ng serve to serve your Angular app.

Step 2: Open Chrome dev tools. Select webpack from the hierarchy.

Step 3: Make sure yo select dot(.) from web pack

Step 4: Say for instance if you want to see what is happening with router. You add a break point and you need to select "Step In" . Please see screenshot below .

Step 5: Screenshot with comments. This will take you to relevant library and you can add your breakpoint there too.!! ( Hope this step is the one you are looking for)

Hint: You can play around with "Step In and Step out" to get more insights.

Hope this is helpful.

Answer 2

I 'm using angular 8 and I haven't set any special configuration during development you can use chrome developer sources panel, in case you want to look for ng-if directive I will look for @angular/common module ,so press Ctrl + P and enter common.js then you can found the class related to ng-if (NgIf).

look for the class related to the directive NgIf and now you can set a breakpoint

you can easily know they exist module for any angualr core library by check the documnetion at angular.io and click source at the top this will take you to angular repo at github and to the file related.