Search code examples
angulardebuggingwebstormsource-maps

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?

enter image description here

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

enter image description here

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

enter image description here

Solution

  • 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
    },
  ...
}