如何用递归组件编译Angular12库？

Question

Tldr：如何使用递归组件编译 angular 库？

Prehistory：我有一个应用程序，其目的是显示复杂的表单。首先，您必须创建一个字段数组，然后将该数组传递给 app-form 组件，它会创建与特定字段类型相对应的组件。像这样：

<div *ngFor="let field of fields">
  <app-input *ngIf="item.type === 'input'"></app-input>
  <app-checkbox *ngIf="item.type === 'checkbox'"></app-checkbox>
  <app-tablist *ngIf="item.type === 'tablist'" [form]="field"></app-tablist>
  <app-cardlist *ngIf="item.type === 'cardlist'" [form]="field"></app-cardlist>
  ...
</div>

这是一个简化的 app-form 模板。如您所见，有基本的字段类型 - 输入、复选框等 - 也有复杂的字段类型 - tablists cardlists。复杂字段在其模板中引用了 app-form，例如，这里是 tablist 的模板：

<mat-tab-group>
  <mat-tab *ngFor="let form_field of form.fields; index as i;">
    <mat-card>
      <app-form [form]="form_field.value"></app-form>
    </mat-card>
  </mat-tab>
</mat-tab-group>

有递归组件：form > tablist > form，它们从未造成过麻烦

现在我需要将 app-form 提取到库中，以便我可以在许多应用程序中使用它。但是当我构建库时它说 “需要创建一个或多个导入循环来编译该组件，当前编译器配置不支持”。我能做些什么吗？

提前致谢

Answer 1

似乎目前 Ivy 无法构建具有递归组件的库，在 angular github 中有一个 issue 关于它。他们说在添加sideEffects: true to library' package.json后应该可以解决问题，但对我来说似乎没有任何效果，所以我最终将所有二级组件移动到父组件：all在模板中具有表单的组件现在在 form.component 文件

中定义

如何用递归组件编译Angular12库？

How to compile Angular 12 library with recursive components?

angular

angular-ivy