你如何调试 Angular 6 库答案

【问题标题】：How do you debug an Angular 6 library你如何调试 Angular 6 库
【发布时间】：2018-11-19 09:26:00
【问题描述】：

我正在编写一个 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 文件中设置断点

【问题讨论】：

标签： angular typescript angular-cli angular-cli-v6 ng-packagr

【解决方案1】：

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

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

【讨论】：

这是正确答案。它将使用 --vendor-source-map 开关，但已弃用。这个 angular.json 开关是你使用的。
耶！我认为这将更难弄清楚。这立即奏效了。谢谢！
我一直在寻找的完美答案。
"options": {"sourceMap": {"scripts": true,"styles": true,"vendor": true}}

【解决方案2】：

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

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

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

Angular 7.2 更新：

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

ng serve --source-map=true

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

【讨论】：

【解决方案3】：

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

【讨论】：

我会试一试，如果它有效，这听起来很完美。
此选项已弃用

【解决方案4】：

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

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

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

使用构建的项目：

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

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

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

文档中提到了一些缺点：

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

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

【讨论】：

这对我来说效果很好。如前所述，解决了调试 typescript 和查看更改的问题，而无需重建 lib。
它在具有更多库的项目中也非常适合我。非常感谢。
我发现由于 typescript rootDir 错误，不再可能在您的项目中构建需要其他库的库。但是，可以将您在回答中提到的源代码目录 (projects/libraryName/src/public-api) 添加到已经存在的 dist/libraryName 条目中第二行。这样我就可以调试和构建所有库。使用 Angular 8.1.3 测试
添加到@comic-sans 评论，将 dist/... 位置放在 projects/... 位置之前，它将使用它找到的第一个。这将允许构建库，但在构建库后调试将不起作用。只要记住在调试之前删除 dist 文件夹（如果它存在）。希望有一个更顺畅的解决方案。我无法让供应商源映射解决方案在 IDE 中进行调试。
我可以说这在 Angular 8 中不起作用。热重载你的库是不够的。我发现这很有帮助：stackoverflow.com/questions/59356732/…

【解决方案5】：

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

【讨论】：