K
K
Kovalsky2021-08-12 14:52:35
Angular
Kovalsky, 2021-08-12 14:52:35

How to build a library for angular 12 with recursive components?

A little background: I have a simple application, the main task of which is to display complex forms. The concept is simple - you create an array of fields that you want to see in the form, pass this array to the app-form component and it renders the component tree inside itself in accordance with the type of each specific field. The app-form template looks something like this:

<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>


Fields can be simple - regular inputs, checkboxes, pictures, etc - or they can be complex - tablists and cardlists, for example. Complex fields differ in that they render app-form inside themselves , for example, a tablelist:
<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>

That is, there are quite legal recursive components form > tablist > form , with which there have never been any problems in the main application.

But now it was necessary to separate the app-form into a library in order to use it in other applications, and when building this library, the compiler says that "One or more import cycles would need to be created to compile this component, which is not supported by the current compiler configuration" . And what to do with it is not clear. Is there any way to build the library after all?

Thanks in advance

Full text of the error
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

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question