{ "id": "errors/NG3003", "title": "NG3003: Import cycles would need to be created to compile this component", "contents": "

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

\n
\n mode_edit\n
\n\n\n\n\n
\n

Descriptionlink

\n

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

\n\nimport { Component } from '@angular/core';\n\n@Component({selector: 'app-parent', template: '<app-child></app-child>'})\nexport class ParentComponent {}\n\n\n\n\nimport { Component } from '@angular/core';\nimport { ParentComponent } from './parent.component';\n\n@Component({selector: 'app-child', template: 'The child!'})\nexport class ChildComponent {\n constructor(private parent: ParentComponent) {}\n}\n\n\n\n

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

\n

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

\n\nparent.component.ts -> child.component.ts -> parent.component.ts\n\n

Remote Scopinglink

\n

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

\n

Librarieslink

\n

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

\n\n
\n
\n
\n

Debugging the errorlink

\n

The cycle that would be generated is shown as part of the error message. For example:

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

Use this to identify how the referenced component, pipe or directive has a dependency back to the\ncomponent being compiled. Here are some ideas for fixing the problem:

\n\n\n
\n\n\n" }