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

Question

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

组件lib-questionnaire使用lib-choices 在它的 html 文件中这样。

<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 但它无法构建，因为它无法接受我的新输入，因为它尚未在生产中实现。

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

Answer 1

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

运行 npm link 在本地图书馆
运行 npm link @local-library-name 在主机应用程序中
但请确保在您的主机上设置“preserveSymlinks”：true applications/libraries angular.json 文件：

    "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

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

How to test nested libraries locally in Angular?

angular

angular-library