How to debug Angular *ngIf structural directive using Chrome within my project?

Question

I would like to attach Angular source code / source map to my generated Angular CLI project, so that I can debug directives like *ngIf in Chrome.

Is it possible to somehow attach debugger into ng_if.ts using some angular.json configuration / source map ...? Or is there a setting to add source map in develop mode so that I can step through any 3rd party library with source map attached?

If I press Ctrl + O in Chrome and then type ngIf or ng_if there is no such file in the list menu.

Edit: How it looks like when vendor source maps are served (see accepted answer):

Madly

Answer 1

This made me curious as well. I never did need to debug angular source code, but why not.

It seems there was a vendorSourceMap flag for the ng cli that was deprecated at some point and the new way of doing this is via the angular.json file since v7.2 (https://blog.ninja-squad.com/2019/01/09/angular-cli-7.2/):

"serve": {
  "options": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    },
  ...
}

Herzig

That made the difference, Ctrl + O now reveals ng_if sources with source maps for example. Thanks! – Madly

Answer 2

with the developer sources panel press Ctrl + P and enter the module name that ngIf directive exesis in angular/common module so enter common.js.

then look for the class name for NgIF then you can set breakpoint

you are looking at javascript version, all core module already build so the can look overwhelming but you can check the source of the NgIf at github to see the typescript source.

Rarely

This works too, so upvote :) but it is w/o source maps. So the other answer accepted. Thanks anyway. – Madly

Answer 3

you can go to html code and on ngIf you put on the tag click F12 on keyboard or ctrl and mouse click to find ngIf File after go to browser and go to inspect and go to source tab and with ctrl + p find the file name you found before and put the break point .

Llamas