如何调试一个 Angular 6 库

Question

我正在编写一个Angular 6库，但无法找出如何进入TypeScript。

我使用以下命令生成应用程序：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文件中设置断点？

- JoAMoS

Answer 1

从 @angular/cli v7 开始，你可以在 angular.json 文件中添加以下配置来启用源映射，在使用 ng serve 时为库提供支持：

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

- Ravi Mashru

---

这是正确的答案。使用--vendor-source-map开关是可以的，但它已经被弃用了。相反，你应该使用这个angular.json开关。 - Gary

耶！我以为这个问题会更难解决。这个方法立刻就有效了。谢谢！ - HankScorpio

我正在寻找的完美答案。 - Arul Rozario

"options": {"sourceMap": {"scripts": true,"styles": true,"vendor": true}} “选项”：{"sourceMap": {"scripts": true,"styles": true,"vendor": true}} - John Duffy

数据路径“”不得具有其他属性（vendorSourceMap）。所有其他变体也是如此... - testing

Answer 2

查看Angular CLI文档中的“library”章节，它提到：

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

所以，你实际上可以更新你的tsconfig.json文件以引用本地源代码而不是已构建的库。

使用已构建的项目:

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

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

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

文件中提到了缺点：

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

但是在我的情况下，这样做是值得的，因为它允许我在Chrome中进行交互式调试，同时可以立即查看更改而无需重新构建。不过，在这个工作流程之外，我会完全测试构建的项目。

- Andy Kachelmeier

---

这对我来说运作良好。正如所提到的，解决了调试 TypeScript 和在不重建库的情况下查看更改的两个问题。 - reads0520

在我使用的带有更多库的项目中，它也非常好用。非常感谢。 - Jie

我发现由于 TypeScript rootDir 错误，现在不再可能在项目中构建需要其他库的库。但是，可以将你在答案中提到的源代码目录（_projects/libraryName/src/public-api_）作为第二行添加到已存在的 dist/libraryName 条目中。这样，我就可以调试和构建所有库了。已在 Angular 8.1.3 中测试过。 - Tobias Reithmeier

补充@comic-sans的评论，将dist/...位置放在projects/...位置之前，它将使用找到的第一个。这将允许库构建，但在库构建完成后调试将无法工作。只需记得在调试之前删除dist文件夹即可。希望有更平滑的解决方案。我一直无法让供应商源映射解决方案在IDE中调试工作。 - reads0520

我可以说在Angular 8中这并不起作用。仅仅拥有库的热重载是不够的。我发现这个链接很有帮助：https://dev59.com/arjna4cB1Zd3GeqP4x-e - Vallerious

Answer 3

如果您使用的是 Angular 12 或更高版本，则需要在主机应用程序的 angular.json 中将 sourceMap 与 scripts、styles、vendor 设置为 true（如果您需要调试它们）。

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            },

- deepakchethan

Answer 4

现在（使用 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 不幸地没有产生预期的效果。将此配置放入 angular.json 中（参见相关问题）：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    },

- Markus Pscheidt

Answer 5

自从 Angular CLI v.6.1 版本以后，你可以使用开关 --vendor-source-map，这将允许你在调试时进入库的 TypeScript 源代码。尝试使用 ng build @abc/cool-lib --vendor-source-map 命令，看看是否有帮助。你也可以在 ng serve 命令中使用这个开关。在我的情况下，我在托管库的应用程序上运行 ng serve，这样库的源映射就被包含了。这种方式还可以避免你不得不编辑 tsconfig.json 文件。

- Scott Grodberg

---

我会尝试一下，如果它有效的话，这听起来就很完美。 - JoAMoS

此选项已被弃用。 - tbo47

Answer 6

在VSCode中试用一下"Debugger for Chrome"扩展，或许可以帮到你。

- Michael Bruyninckx