Как собрать библиотеку для angular 12 с рекурсивными компонентами?

Question

[Kovalsky]

Небольшая предыстория: есть у меня простенькое приложение, основной задачей которого является отображение сложных форм. Концепция простая - создаешь массив полей, которые хочешь видеть в форме, передаешь этот массив в компонент app-form и он внутри себя рендерит дерево компонентов в соответствии с типом каждого конкретного поля. Шаблон 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, вот например таблист:

<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 в библиотеку чтобы использовать в других приложениях и при сборке этой библиотеки компилятор говорит что "One or more import cycles would need to be created to compile this component, which is not supported by the current compiler configuration". И что с этим делать непонятно. Есть какой-нибудь способ все таки собрать библиотеку?

Заранее спасибо

Полный текст ошибки

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'app-core'
------------------------------------------------------------------------------
| Compiling with Angular sources in Ivy partial compilation mode.WARNING: postcss-url: D:\git\app\projects\app-core\src\lib\layouts\default-layout\default-layout.component.scss:29:3: Image type is svg and lin
k contains #. Postcss-url cant handle svg fragments. SVG file fully inlined. D:\git\app\projects\app-core\src\assets\img\icons.svg
× Compiling with Angular sources in Ivy partial compilation mode.
projects/app-core/src/lib/components/forms/form.component.ts:37:1 - error NG3003: One or more import cycles would need to be created to compile this component, which is not supported by the current compiler configuration.

 37 @Component({
    ~~~~~~~~~~~~
 38   selector: 'app-form',
    ~~~~~~~~~~~~~~~~~~~~~~~
...
441   }
    ~~~
442 }
    ~

  projects/app-core/src/lib/components/forms/reactive-tablist/reactive-tablist.component.ts:4:1
      4 @Component({
        ~~~~~~~~~~~~
      5   selector: 'app-reactive-tablist',
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ...
     21
       
     22 }
        ~
    The component 'ReactiveTablistComponent' is used in the template but importing it would create a cycle: D:/git/app/projects/app-core/src/lib/components/forms/form.component.ts -> D:/git/app
/projects/app-core/src/lib/components/forms/reactive-tablist/reactive-tablist.component.ts -> D:/git/app/projects/app-core/src/lib/components/forms/form.component.ts

Comments

[Антон Швец]

Это не циклическая зависимость, это рекурсивный компонент. А ts друг в друга не импортируется ничего?

[Kovalsky]

Антон Швец, нет, они ссылаются друг на друга только в шаблонах. На всякий случай добавил в вопрос полный текст ошибки

Answer 1

[Kovalsky]

Выяснилось, что это не просто случайная ошибка сборки или архитектуры, а актуальная для всей команды ангуляра проблема сборки рекурсивных компонентов в библиотеках под Ivy. В связанном issue на гитхабе написано что проблема должна решаться указанием sideEffects: true в package.json собираемой библиотеки, но конкретно у меня наличие этого свойства ничего не изменило, так что в качестве временного решения все компоненты второго уровня перенесены прям в файл родительского компонента, то есть теперь все компоненты вызывающие form объявлены прямо в файле с компонентом form