5 lines
5.4 KiB
JSON
5 lines
5.4 KiB
JSON
|
{
|
||
|
|
"id": "errors/NG3003",
|
||
|
|
"title": "NG3003: Import cycles would need to be created to compile this component",
|
||
|
|
"contents": "<h1 id=\"ng3003-import-cycles-would-need-to-be-created-to-compile-this-component\">NG3003: Import cycles would need to be created to compile this component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG3003#ng3003-import-cycles-would-need-to-be-created-to-compile-this-component\"><i class=\"material-icons\">link</i></a></h1>\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/errors/NG3003.md?message=docs(...)%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n\n\n<div class=\"content\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG3003#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>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 <code>ParentComponent</code> references a <code>ChildComponent</code> in its template:</p>\n<code-example path=\"errors/cyclic-imports/parent.component.ts\" header=\"parent.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({selector: 'app-parent', template: '<app-child></app-child>'})\nexport class ParentComponent {}\n\n\n</code-example>\n<code-example path=\"errors/cyclic-imports/child.component.ts\" header=\"child.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { ParentComponent } from './parent.component';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({selector: 'app-child', template: 'The child!'})\nexport class ChildComponent {\n constructor(private parent: ParentComponent) {}\n}\n\n\n</code-example>\n<p>There is already an import from <code>child.component.ts</code> to <code>parent.component.ts</code> since the <code>ChildComponent</code>\nreferences the <code>ParentComponent</code> in its constructor.</p>\n<p>But note that the parent component's template contains <code><child></child></code>. The generated code for this\ntemplate must therefore contain a reference to the <code>ChildComponent</code> class. In order to make this reference\nthe compiler would have to add an import from <code>parent.component.ts</code> to <code>child.component.ts</code>, which would\ncause an import cycle:</p>\n<code-example>\nparent.component.ts -> child.component.ts -> parent.component.ts\n</code-example>\n<h3 id=\"remote-scoping\">Remote Scoping<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG3003#remote-scoping\"><i class=\"material-icons\">link</i></a></h3>\n<p>To avoid adding imports that create cycles, additional code is added to the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> class where\nthe component is declared that wires up the dependencies. This is known as \"remote scoping\".</p>\n<h3 id=\"libraries\">Libraries<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG3003#libraries\"><i class=\"material-icons\">link</i></a></h3>\n<p>Unfortunately, \"remote scoping\" code is side-effectful, which prevents tree shaking, and cannot\nbe used in libraries. So when building libraries using the <code>\"compilationMode\": \"partial\"</code> setting,\nany component that would require a cyclic import will cause this <code>NG3003</code> compiler error to be raised.</p>\n\n</div>\n<br>\n<div class=\"debugging\">\n <h2 id=\"debugging-the-error\">Debugging the error<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"errors/NG3003#debugging-the-error\"><i class=\"material-icons\">link</i></a></h2>\n <p>The cycle that would be
|
||
|
|
}
|