Answer the question
In order to leave comments, you need to log in
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>
<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>
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 questionAsk a Question
731 491 924 answers to any question