Как отладить структурную директиву Angular * ngIf, используя Chrome в моем проекте?

Question

Я хотел бы присоединить исходный код / ​​исходную карту Angular к моему сгенерированному проекту Angular CLI, чтобы я мог отлаживать такие директивы, как *ngIf в Chrome.

Можно ли каким-либо образом присоединить отладчик к ng_if.ts используя некоторую конфигурацию / исходную карту angular.json ...?Или есть параметр для добавления исходной карты в режиме разработки, чтобы я мог просматривать любую стороннюю библиотеку с прикрепленной исходной картой?

Если янажмите Ctrl + O в Chrome, а затем введите ngIf или ng_if, такого файла в списке нет.

Редактировать: Как выглядит, когда обслуживаются исходные карты поставщиков (см. Принятый ответ):

Answer 1

с панелью источников разработчика нажмите Ctrl + P и введите имя модуля, для которого указана директива ngIf в модуле angular/common, поэтому введите common.js.

, затем найдите имя класса для NgIF, затем вы можете установить точку останова

вы смотрите на версию javascript, все основные модули уже собраны, поэтому они могут выглядеть подавляющим, но вы можете проверить источник NgIf в github, чтобы увидеть источник машинописного текста.

Answer 2

Это также сделало меня любопытным.Мне никогда не нужно было отлаживать угловой исходный код, но почему бы и нет.

Кажется, для ng cli был установлен флаг vendorSourceMap, который в какой-то момент устарел, и новый способ сделать это - через angular.json файл начиная с версии 7.2 (https://blog.ninja -squad.com / 2019/01/09 / angular-cli-7.2 / ):

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