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

Since Angular CLI v. 6.1，您可以使用开关sum(sparse_matrix).toarray()[0]，这样在调试时可以进入库的打字稿源。尝试--vendor-source-map，看看是否有帮助。您也可以将开关与ng build @abc/cool-lib --vendor-source-map一起使用。就我而言，我在托管该库的应用程序上运行ng serve，其中包括了库的源映射。这样也省去了编辑tsconfig.json

的麻烦。

Answer 3

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

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

现在可以使用库资源（在Chrome / Firefox / ... dev工具中）。

更新Angular 7.2：

--vendor-source-map已由ng serve的--sourceMap=true|false代替：

ng serve --source-map=true

进一步更新： --source-map=true很遗憾没有达到理想的效果。有一个related question here。

Answer 4

从@ angular / cli v7开始，您可以将以下配置添加到angular.json文件中，以在使用ng serve进行服务时为库启用源地图：

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

Answer 5

查看VSCode中的“ Chrome调试器”扩展程序，也许可以帮到您。

如何调试Angular 6库

5 个答案: