检测到循环依赖中的警告 - Angular Cli答案

【问题标题】：WARNING in Circular dependency detected - Angular Cli检测到循环依赖中的警告 - Angular Cli
【发布时间】：2018-05-08 01:09:18
【问题描述】：

https://github.com/angular/angular-cli/pull/6813 添加了循环依赖的警告，我知道我可以使用 "showCircularDependencies": false 关闭所有警告。但我宁愿保持循环依赖警告。 是否有一种模式可以让我修复下面的用例，或者有没有办法专门禁用特定文件上的循环依赖插件？

最简单的情况是如果我有 3 个文件：

forms.model.ts

import { CustomModel } from './custom.model';
import { CustomForm } from './custom.form';

export class Forms {
  items: CustomForm[] = [];
  public constructor(models?: CustomModel[]) {
    models.forEach(model => this.items.push(new CustomForm(model)));
  }
}

custom.model.ts

export class CustomModel {
  nestedModels: CustomModel[];    
}

custom.form.ts

import { Forms } from './forms.model';
import { CustomModel } from './custom.model';

export class CustomForm {
  nestedForms: Forms;

  constructor(model: CustomModel) {
    this.nestedForms = new Forms(model.nestedModels);
  }
}

这会导致以下警告：

WARNING in Circular dependency detected:
src\app\models\custom.form.ts -> src\app\models\forms.model.ts -> src\app\models\custom.form.ts

WARNING in Circular dependency detected:
src\app\models\forms.model.ts -> src\app\models\custom.form.ts -> src\app\models\forms.model.ts

在我的实际应用中，由于相同的模式，大约有 20-30 个警告。我认为底层插件https://github.com/aackerman/circular-dependency-plugin 支持排除模式，但我不确定是否有办法通过 angular-cli 使用它。

【问题讨论】：

查看github.com/angular/angular-cli/issues/7705

标签： angular warnings angular-cli circular-dependency

【解决方案1】：

问题很明确：

您正在将custom.model.ts 用于custom.form.ts

还有custom.form.ts 变成custom.model.ts，

这叫CircularDependencies，不好。

解决方案：

只需从custom.model.ts 中删除import { CustomForm } from './custom.form';

【讨论】：

抱歉，在创建这个 SO 问题时导入是偶然的。我现在已经从原始问题中编辑了该行。在这种情况下，删除导入没有帮助。循环依赖是由对 new Forms() 和 new CustomForms() 的调用引起的。
custom.form.ts 未导入到custom.model.ts。
你能解释一下为什么循环依赖是“不好的”吗？我可以在一个文件中有两个函数，其中每个函数在某些情况下可以调用另一个函数。这也是一个循环依赖（每个函数都需要另一个函数存在），但我还没有看到现代编译器抱怨这种情况......
我遇到了类似的情况，我要解决的问题是创建一个外部共享模块，声明所有共享组件并定义导出的组件，然后在使用模块时导入它们。这个 tut vid 帮助我更好地理解 youtube.com/watch?v=p2Bvtv5PUJ0

【解决方案2】：

您可以将 forms.model.ts 和 custom.form.ts 的代码放在同一个文件中，这将消除循环依赖。

【讨论】：

这是 Angular Material 组件库为它的 Stepper 和 Step 类所做的，因为它们相互引用。

【解决方案3】：

forms.model.ts 使用 custom.form.ts，custom.form.ts 使用 forms.model.ts 这是依赖循环的原因，通过更改模型来消除这种关系。

如果没有 CustomForm，并且由于没有 Forms 而无法创建 CustomForm，如何创建 Forms？（是的，您可以使用 null 或 undefined 但这是丑）

forms.model.ts

import { CustomModel } from './custom.model';
import { CustomForm } from './custom.form';

export class Forms {
  items: CustomForm[] = []; /** refences to CustomForm **/
  public constructor(models?: CustomModel[]) {
    models.forEach(model => this.items.push(new CustomForm(model)));
  }
}

custom.form.ts

import { Forms } from './forms.model';
import { CustomModel } from './custom.model';

export class CustomForm {
  nestedForms: Forms; /** refences to Forms **/

  constructor(model: CustomModel) {
    this.nestedForms = new Forms(model.nestedModels);
  }
}

【讨论】：

【解决方案4】：

您还可以通过在 angular.json 文件中添加以下行来隐藏这些循环 CI 警告

            "build": {
                "options": {
                    .....,
                    "showCircularDependencies": false
                },
                "configurations": {
                ....
                }
            },
            "serve": {
                ....
            },
        }```

【讨论】：

完全同意@srikanth_yarram，永远不要建议禁止此类警告。这是设计中的一个潜在问题，应该建议他们修复它。

【解决方案5】：

我想在此对话中补充一点，如果您有循环依赖警告，并且它不是由从桶文件中以某种方式相互交叉引用的导入引起的，则可能是 provideIn: root 导致循环依赖警告。

@Injectable({provideIn: root}) 这使得我的一项服务要么被提供两次，要么在编译时不应该出现的文件中提供。

【讨论】：