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

问题描述

我的库中有两个组件名为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发生了变化，例如添加另一个输入，例如：

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

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

标签： angularangular-library

您可以使用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

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

问题描述

解决方案

推荐阅读