NG3003: Import cycles would need to be created to compile this componentlink

Descriptionlink

A component, directive or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports. For example, consider a scenario where a ParentComponent references a ChildComponent in its template:

      
        content_copy
      
      import { Component } from '@angular/core';

@Component({selector: 'app-parent', template: '<app-child></app-child>'})
export class ParentComponent {}
    

      
        content_copy
      
      import { Component } from '@angular/core';
import { ParentComponent } from './parent.component';

@Component({selector: 'app-child', template: 'The child!'})
export class ChildComponent {
  constructor(private parent: ParentComponent) {}
}
    

There is already an import from child.component.ts to parent.component.ts since the ChildComponent references the ParentComponent in its constructor.

But note that the parent component's template contains <child></child>. The generated code for this template must therefore contain a reference to the ChildComponent class. In order to make this reference the compiler would have to add an import from parent.component.ts to child.component.ts, which would cause an import cycle:

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

Remote Scopinglink

To avoid adding imports that create cycles, additional code is added to the NgModule class where the component is declared that wires up the dependencies. This is known as "remote scoping".

Librarieslink

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.