如何调试Angular 6库 [英] How do you debug an Angular 6 library

问题描述

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

I'm writing an Angular 6 Library and cannot figure out how to step into the typescript.

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

I generated the app using: ng new mylibapp

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

I then added the library using: ng g library @abc/cool-lib -p abc

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

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

it generates the code in the mylibapp/dist/abc/cool-lib folder

现在如何调试此代码并在位于 mylibapp / projects / abc / cool-lib / src / lib

How can I now debug this code and set breakpoints in the ts file located at mylibapp/projects/abc/cool-lib/src/lib

推荐答案

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

Looking at the Angular CLI docs on libraries, it mentions the following:

有些类似的设置代替了tsconfig中直接提供源代码的路径。这样可以更快地查看应用程序中的更改。

Some similar setups instead add the path to the source code directly inside tsconfig. This makes seeing changes in your app faster.

因此，您实际上可以更新tsconfig.json来引用本地资源代码而不是内置库。

So, from that, you can actually update your tsconfig.json to reference your local source code instead of the built library.

使用已构建的项目：

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

更改为使用实际来源：

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

有缺点文档：

但是这样做很冒险。当您执行此操作时，您的应用程序的构建系统也会在构建库。但是您的库是使用与应用程序不同的构建系统构建的。

But doing that is risky. When you do that, the build system for your app is building the library as well. But your library is built using a different build system than your app.

但是在我来说，允许我这样做是值得的在Chrome中进行交互式调试以及无需重新构建即可立即查看更改。不过，我会在此工作流程之外对已建项目进行全面测试。

But in my case, it was worth it to allow me to debug in Chrome interactively as well as to see changes immediately without rebuilding. I do fully test with the built project outside of this workflow though.

这篇关于如何调试Angular 6库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！