如何在项目中使用Chrome调试Angular * ngIf结构化指令？

Question

我想将Angular源代码/源映射附加到我生成的Angular CLI项目中，以便可以在Chrome中调试*ngIf之类的指令。

是否可以使用一些angular.json配置/源映射将调试器附加到ng_if.ts中？ 还是有一种设置可以在开发模式下添加源地图，以便我可以逐步浏览带有源地图的任何第三方库？

如果我在Chrome中按 Ctrl + O ，然后键入ngIf或ng_if，则列表菜单中没有此类文件。 / p>

编辑：提供供应商源地图时的外观（请参见已接受的答案）：

Answer 1

这也让我感到好奇。我从来不需要调试有角度的源代码，但为什么不呢？

似乎在某个时候不推荐使用ng cli的vendorSourceMap标志，而新的实现方法是通过v7.2（https://blog.ninja-squad.com/2019/01/09/angular-cli-7.2/之后的angular.json文件）：

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

Answer 2

在开发人员源面板中，按 Ctrl + P 并输入ngIf指令在angular/common模块中存在的模块名称，因此输入common.js。

然后查找NgIF的类名，然后可以设置断点

  

您正在查看javascript版本，所有核心模块均已构建，因此   看起来不堪重负，但您可以在以下位置查看NgIf的来源   github上查看打字稿源。