填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

NG3003: Import cycles would need to be created to compile this component
編譯此元件時需要建立迴圈匯入

說明

Description

該元件參考的元件、指令或管道將要求編譯器新增某個匯入,而這將導致迴圈匯入。例如,考慮一個場景,其中 ParentComponent 在其範本中參考了 ChildComponent

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:

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

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

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

由於 ChildComponent 在其建構函式中參考了 ParentComponent ,因此已經有一個從 child.component.tsparent.component.ts 的匯入。

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

但是請注意,父元件的範本中包含 <child></child>。因此,該範本的產生後代碼必須包含對 ChildComponent 類別的參考。而為了進行此參考,編譯器必須將從 parent.component.ts 的匯入新增到 child.component.ts ,這將導致迴圈匯入:

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:

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

遠端作用域

Remote Scoping

為了避免新增會導致迴圈的匯入,可以將一些額外程式碼新增到 NgModule 類別中,在該類別中宣告聯絡依賴關係的元件。這稱為“遠端作用域”。

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".

函式庫

Libraries

不幸的是,“遠端作用域”程式碼有副作用,它會阻止搖樹優化,並且不能在函式庫中使用。因此,當使用 "compilationMode": "partial" 設定來建構函式庫時,任何需要迴圈匯入的元件都將引發此 NG3003 編譯器錯誤。

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.


如何排除本錯誤

Debugging the error

這種迴圈會顯示為錯誤訊息的一部分。例如:

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

      
      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 this to identify how the referenced component, pipe or directive has a dependency back to the component being compiled. Here are some ideas for fixing the 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.