如何调试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文件夹中生成代码

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

Answer 1

查看Angular CLI docs on libraries，它提到了以下内容：

一些类似的设置，直接在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

• Start应用编译库:带有供应商源代码映射的
• ：ng serve --vendor-source-map

现在可以使用库源代码了(在Chrome/Firefox/...开发工具)。

Angular 7.2的更新：

--vendor-source-map已被用于ng serve的--sourceMap=true|false取代

• ng serve --source-map=true

进一步更新:不幸的是，--source-map=true没有达到预期的效果。有一个related question here。