angular 13 ivy: use component html recursively ==> "The component 'x' is used in the template but importing it would create a cycle: "

Question

I understand this error but i need help finding a solution.

Im making a CMS ui. It has a form.component.html which uses fields.component.html one of the fields is a field-set.component.html which re-imports fields.component.html

I want this recursive use of template to work some how.

note => this set up works in dev. It just cant compile. Also im pretty sure this used to compile before Ivy

Markup structure (base)

<form>
  <fields></fields>
</form>

Markup structure (fields)

<div class="fields">
<field-text></field-text>
<field-textarea></field-textarea>
<field-set></field-set> <!-- this has fields again -->
<field-select></field-select>
<field-date></field-date>
</div>

Markup structure (field-set)

<div class="field-set">
<fields [fieldSet]="true"></fields>
</div>

Angular CLI: 13.1.3
Node: 14.16.0
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 13.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.3
@angular-devkit/build-angular   13.1.3
@angular-devkit/core            13.1.3
@angular-devkit/schematics      13.1.3
@angular/cli                    13.1.3
@angular/fire                   7.2.0
@schematics/angular             13.1.3
ng-packagr                      13.1.3
rxjs                            6.6.7
typescript                      4.5.4

Answer 1

For what I can understand, this is not possible anymore because of the Circular Dependency Issue

• For the easy explanation.
• For the detailed debate

Unfortunately, "remote scoping" code is side-effectful, which prevents tree shaking, and cannot be used in libraries. So when building libraries using the "compilationMode": "partial" setting, any component that would require a cyclic import will cause this NG3003 compiler error to be raised.

Here Ideas given by angular to fix your problem.

• Try to re-arrange your dependencies to avoid the cycle. For example using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
• Move the classes that reference each other into the same file, to avoid any imports between them.
• Convert import statements to type-only imports (using import type syntax) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.