Ciclo de Import Detectado

Um component, directive ou pipe que é referenciado por este component exigiria que o compilador adicionasse um import que levaria a um ciclo de imports. Por exemplo, considere um cenário onde um ParentComponent referencia um ChildComponent em seu template:

import {Component} from '@angular/core';import {ChildComponent} from './child.component';@Component({selector: 'app-parent',imports: [ChildComponent],template: '<app-child/>',})export class ParentComponent {}

import {Component, inject} from '@angular/core';import {ParentComponent} from './parent.component';@Component({selector: 'app-child',template: 'The child!',})export class ChildComponent {private parent = inject(ParentComponent);}

Já existe um import de child.component.ts para parent.component.ts desde que o ChildComponent referencia o ParentComponent em seu construtor.

ÚTIL: O template do component pai contém <child></child>. O código gerado para este template deve, portanto, conter uma referência à classe ChildComponent. Para fazer essa referência, o compilador teria que adicionar um import de parent.component.ts para child.component.ts, o que causaria um ciclo de import:

parent.component.ts -> child.component.ts -> parent.component.ts

Remote Scoping

Se você está usando NgModules, para evitar adicionar imports que criam ciclos, código adicional é adicionado à classe NgModule onde o component que conecta as dependências é declarado.

Isso é conhecido como "remote scoping".

Libraries

Infelizmente, o código de "remote scoping" tem efeitos colaterais —o que impede tree shaking— e não pode ser usado em libraries. Então, ao construir libraries usando a configuração "compilationMode": "partial", qualquer component que exigir um import cíclico causará o erro de compilador NG3003 a ser lançado.

Depurando o erro

O ciclo que seria gerado é mostrado como parte da mensagem de erro. Por exemplo:

The component ChildComponent is used in the template but importing it would create a cycle:/parent.component.ts -> /child.component.ts -> /parent.component.ts

Use isso para identificar como o component, pipe ou directive referenciado tem uma dependência de volta para o component sendo compilado. Aqui estão algumas ideias para corrigir o problema:

• Tente reorganizar suas dependências para evitar o ciclo. Por exemplo, usando uma interface intermediária que é armazenada em um arquivo independente que pode ser importado para ambos os arquivos dependentes sem causar um ciclo de import.
• Mova as classes que se referenciam para o mesmo arquivo, para evitar quaisquer imports entre elas.
• Converta declarações import para imports somente de tipo (usando sintaxe import type) se as declarações importadas forem usadas apenas como tipos, pois imports somente de tipo não contribuem para ciclos.