5

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

Improve this question

3 Answers 3

Reset to default
4

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
    },
  ...
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That made the difference, Ctrl + O now reveals ng_if sources with source maps for example. Thanks!
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.

common.js

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

enter image description here

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.

Improve this answer

1 Comment

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

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 .

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.