如何在 Angular 中本地测试嵌套库？答案

【问题标题】：How to test nested libraries locally in Angular?如何在 Angular 中本地测试嵌套库？
【发布时间】：2021-06-08 17:37:25
【问题描述】：

我的库中有两个组件，分别名为 lib-questionnaire 和 lib-choices。

组件 lib-questionnaire 在其 html 文件中像这样使用 lib-choices。

<div class="row">
  <div class="col-xs-12">
    <lib-choices
       [name]="name"
       [id]="id"
       [choices]="choices">
    </lib-choices
  </div>
</div>

但由于我的 lib-questionnaire 发生了变化，例如添加另一个 Input，例如：

<div class="row">
  <div class="col-xs-12">
    <lib-choices
       [name]="name"
       [id]="id"
       [multipleChoices]=true
       [choices]="choices">
    </lib-choices
  </div>
</div>

添加的 Input 是 [multipleChoice] 目前没有在 lib-choices 中声明生产，但我已经在本地声明了它。

我尝试先在本地构建 lib-choices，然后再构建 lib-questionnaire，但是它无法构建，因为它尚未在生产中实现，因此无法接受我的新输入。

我的问题是如何在本地构建库中的两个组件？

【问题讨论】：

这两个组件是否在两个不同的库模块中？根据您的问题，它们都在同一个库中。那么为什么以及如何单独构建这些？
是的，它们有不同的模块。在构建中，我使用命令 ng build @lib/questionnaire 和 ng build @lib/choices。
我使用命令 ng g library @lib/component -p lib --entry-file /public-api 来构建这两个组件。

标签： angular angular-library

【解决方案1】：

您可以使用npm link，它会在您的依赖应用程序/库 node_modules 目录中创建一个符号链接。它涉及：

在本地库中运行npm link
在宿主应用程序中运行npm link @local-library-name
但请确保在主机应用程序/库 angular.json 文件中设置“preserveSymlinks”：true：

    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "preserveSymlinks": true,
        "tsConfig": "projects/button/tsconfig.lib.json",
        "project": "projects/button/ng-package.json"
      }
    },

在您的情况下，您可以执行以下操作：

进入@lib/choices目录并运行npm link
进入@lib/questionnaire 目录运行npm link @lib/choices 并进行构建。您也可以在此处执行npm link，以便您可以在主机应用程序中使用npm link @lib/questionnaire

【讨论】：

我还应该进行 ng build @lib/component 并更新我的 package.json 文件路径吗？我尝试执行 npm-link 并检查了我的 angular.json 库和主机应用程序，它们都将“preseverSymlinks”设置为 true。但是主机应用程序没有得到我对两者的更改。