angular - 你如何调试 Angular 6 库

Question

我正在编写一个 Angular 6 库，但无法弄清楚如何进入打字稿。

我使用以下方法生成了应用程序：ng new mylibapp

然后我使用以下方法添加了库：ng g library @abc/cool-lib -p abc

当我执行时：ng build @abc/cool-lib

mylibapp/dist/abc/cool-lib它在文件夹中生成代码

我现在如何调试此代码并在位于的 ts 文件中设置断点mylibapp/projects/abc/cool-lib/src/lib

Answer 1

查看有关 library 的 Angular CLI 文档，它提到了以下内容：

一些类似的设置会直接在 tsconfig 中添加源代码的路径。这样可以更快地查看您的应用程序中的更改。

因此，您实际上可以更新您的 tsconfig.json 以引用您的本地源代码而不是构建的库。

使用构建的项目：

 "paths": {
  "abc": [
    "dist/abc"
  ]

将其更改为使用实际来源：

"paths": {
  "abc": [
    "projects/abc/src/public_api"
  ]

文档中提到了一些缺点：

但这样做是有风险的。当您这样做时，您的应用程序的构建系统也在构建库。但是您的库是使用与您的应用程序不同的构建系统构建的。

但就我而言，让我在 Chrome 中进行交互式调试以及在不重新构建的情况下立即查看更改是值得的。不过，我确实在此工作流程之外对已构建的项目进行了全面测试。

Answer 2

从 @angular/cli v7 开始，您可以将以下配置添加到angular.json文件中，以便在使用时为库启用源映射ng serve：

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true

Answer 3

现在的设置（使用 Angular 7，可能已经 6.2）非常简单：

• 在监视模式下编译库：ng build [mylib] --watch
• 使用供应商源地图启动应用程序：ng serve --vendor-source-map

现在库源可用（在 Chrome/Firefox/... 开发工具中）。

---

Angular 7.2 的更新：

--vendor-source-map已替换--sourceMap=true|false为 for ng serve：

• ng serve --source-map=true

---

进一步更新： --source-map=true不幸的是没有达到预期的效果。这里有一个相关的问题。

Answer 4

从 Angular CLI v. 6.1开始，您可以使用该开关--vendor-source-map，它允许您在调试时进入库的 typescript 源。试试看ng build @abc/cool-lib --vendor-source-map是否有帮助。您也可以将开关与ng serve. 就我而言，我在托管库的应用程序上运行 ng serve ，并且包含库的源映射。这种方式还可以让您不必编辑 tsconfig.json

Answer 5

查看 VSCode 中的“Debugger for Chrome”扩展程序，也许对您有所帮助。