Angular: ReferenceError: Cannot access 'FixedDeposit' before initialization + Circular Dependency Warning

Question

我已经通过以下 SO 问题寻求解决方案：

首先，我在 VS Code 终端上收到以下警告：

WARNING in Circular dependency detected: src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts

WARNING in Circular dependency detected: src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-details\fixed-deposits-details.component.ts -> src\app\modules\asset-classes\fixed-income\fixed-deposits\components\fixed-deposits-form\fixed-deposits-form.component.ts

WARNING in Circular dependency detected: src\app\modules\shared\components\common-dialog\common-dialog.component.ts -> src\app\view-manager.service.ts -> src\app\modules\shared\components\common-dialog\common-dialog.component.ts

WARNING in Circular dependency detected: src\app\view-manager.service.ts -> src\app\modules\shared\components\common-dialog\common-dialog.component.ts -> src\app\view-manager.service.ts

现在，这显然是因为我各自组件中的以下代码：

定期存款-form.component.ts

点击“保存”>>

this.viewService.loadSideNavWithCallback(
    FixedDepositsDetailsComponent,
    (compRef: ComponentRef<any>) => {
    compRef.instance.fixedDeposit = fixedDepositEntity;
});

定期存款-details.component.ts

在“编辑”中单击 >>

this.viewService.loadSideNavWithCallback(
  FixedDepositsFormComponent,
  (compRef: ComponentRef<any>) => {
    compRef.instance.fixedDeposit = this.fixedDeposit;
  });

viewService 基本上是我的 ViewManagerService，它有助于实现 angular 组件之间的松散耦合，还用于视图导航。由于 FixedDepositsFormsComponent 和 FixedDepositsDetailsComponent 在侧导航中打开（出现在 AppComponent 上），ViewManagerService 负责加载这些组件。

虽然很明显我有循环依赖，但我不知道如何解决它。

我的浏览器控制台也出现以下错误：

Uncaught ReferenceError: Cannot access 'FixedDeposit' before initialization at Module.FixedDeposit (main.js:4274) at Module../src/app/modules/asset-classes/fixed-income/fixed-deposits/components/fixed-deposits-details/fixed-deposits-details.component.ts (fixed-deposits-details.component.ts:21)

现在第 21 行只是指向我在详细信息组件上的@Input 属性：

export class FixedDepositsDetailsComponent implements OnInit {

  @Input() fixedDeposit: FixedDeposit;

如果我从 FixedDepositsFormComponent 中删除 loadSideNavWithCallback 代码（在单击保存时调用），则不会出现错误。但我无法取消它，因为我需要该代码来加载详细信息组件。

提前感谢任何帮助。

Answer 1

为了避免循环依赖，我通常将操作代码（edit/save 等）移动到公共服务中，并严格保持组件显示 html 中的元素。即，将 loadSideNavWithCallback 从 FixedDepositsFormComponent 移动到公共服务。

一个对我有用的经验法则是避免将组件导入另一个组件/服务，而是使用服务。

Answer 2

循环依赖是不好的，因为它使得 webpack 无法按依赖顺序初始化模块。通常 webpack 确保无论何时将模块的导出导入到其他地方，导出模块在导入模块之前执行，从而确保所有值在导入到其他地方之前都已定义和初始化。

但是，如果存在循环依赖，则不存在这样的初始化顺序，这使得在定义值之前导入值成为可能，causes the import to return undefined. Because this is surprising and can be hard to debug, Angular CLI emits 如果检测到循环依赖，则会发出警告。它做得很好，因为它暗示了你的 FixedDeposit 在初始化之前是如何被使用的。

因此，注意 CLI 的警告并避免在代码中创建循环依赖是个好主意。

The viewService is basically my ViewManagerService that helps achieved loose coupling between angular components and also serves for view navigation

如我们所见，您的“松散”耦合仍然太紧。此外，使用有状态服务进行导航会绕过 angular 路由器，使用户无法为单个视图添加书签，并导致开发期间的实时重新加载回退到不同的视图。

出于所有这些原因，应该使用 angular 路由器而不是有状态服务来执行导航。然后，组件可以在不知道负责该视图的组件的情况下导航到不同的视图，因此不会在组件类之间创建循环依赖。有关如何配置和使用 angular 路由器的更多信息，请参阅 in the official angular tutorial.

Angular: ReferenceError: Cannot access 'FixedDeposit' before initialization + Circular Dependency Warning

Angular: ReferenceError: Cannot access 'FixedDeposit' before initialization + Circular Dependency Warning

angular

circular-dependency

uncaught-reference-error