如何调试Angular 6库

我正在写一个Angular 6库，不知道如何进入打字脚本

我使用：

ng new mylibapp

然后，我使用以下命令添加了库：

ngg library@abc/cool lib-p abc

当我执行时：

ng build@abc/cool lib

它在

mylibapp/dist/abc/cool lib

文件夹中生成代码

我现在如何调试这段代码并在ts文件中设置断点，该文件位于

mylibapp/projects/abc/cool lib/src/lib

查看VSCode中的“Chrome调试器”扩展名，这可能会对您有所帮助。

查看下面的内容：

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

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

使用已建项目：

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

将其更改为使用实际源：

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

如文件中所述，存在以下缺点：

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

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

，您可以使用switch

--vendor source map

，这将允许您在调试时进入库的typescript源代码。尝试

ng build@abc/cool lib——供应商源代码映射
，看看这是否有帮助。您也可以将开关与
ng serve
一起使用。在我的例子中，我在托管库的应用程序上运行ng serve，其中包括库的源映射。这种方式也省去了编辑tsconfig.json的麻烦。现在的设置（使用Angular 7，可能已经使用了6.2）非常简单：


在监视模式下编译库：
ng build[mylib]--监视

使用供应商源地图启动应用程序：
ng serve--供应商源地图

现在可以使用库源代码（在Chrome/Firefox/…dev工具中）


Angular 7.2的更新：

--供应商源地图
已替换为
--sourceMap=true | false
：


ng serve--source map=true


进一步更新：
--source map=true
不幸的是没有达到预期的效果。从@angular/cli v7开始，有一个。
可以将以下配置添加到
angular.json
文件中，以便在使用
ng serve
服务时为库启用源地图：

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

这对我来说很有效。如前所述，它解决了调试typescript和在不重建lib的情况下查看更改的问题。它在具有更多lib的项目中也非常适合我。非常感谢。我发现由于typescript rootDir错误，无法再构建需要项目中其他库的库。但是，可以将您在回答中提到的源代码目录（projects/libraryName/src/public-api）添加到已经存在的dist/libraryName条目中作为第二行。这样我就可以调试和构建所有库。使用Angular 8.1.3进行测试，在@comic sans comment中添加dist/。。。项目前的位置/。。。位置，它将使用它找到的第一个。这将允许构建libs，但在构建库之后调试将不起作用。只要记住在调试之前删除dist文件夹（如果存在）。希望有一个更平滑的解决方案。我无法让供应商源代码映射解决方案在IDE中进行调试。我可以说这在Angular 8中不起作用。仅仅热加载库是不够的。我发现这很有帮助：我会尝试一下，如果它有效，这听起来很完美。这个选项不受欢迎。这是正确的答案。可能会使用--vendor-source-map开关，但这是不推荐的。这个angular.json开关就是您所使用的。耶！我想这会更难搞清楚。这立刻奏效了。谢谢完美的答案我一直在寻找。“选项”：{“源地图”：{“脚本”：真，“样式”：真，“供应商”：真}