你如何调试 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 new mylibapp

I generated the app using: ng new mylibapp

然后我使用以下方法添加了库:ng g library @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文件夹中生成代码

我现在如何调试此代码并在位于 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"
  ]

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

Change it to use the actual source:

"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屋！