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

问题

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):

回答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
    },
  ...
}

回答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.

来源：https://stackoverflow.com/questions/58074810/how-to-debug-angular-ngif-structural-directive-using-chrome-within-my-project