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

检测到循环依赖项中的警告-Angular Cli,angular,warnings,angular-cli,circular-dependency,Angular,Warnings,Angular Cli,Circular Dependency,为循环依赖项添加了警告,我知道我可以使用“showCircularDependencies”:false关闭所有警告。但我宁愿保持循环依赖性警告有没有一种模式可以让我修复下面的用例,或者有没有一种方法可以专门禁用特定文件上的循环依赖插件? 最简单的情况是,如果我有3个文件: forms.model.ts import { CustomModel } from './custom.model'; import { CustomForm } from './custom.form'; export

为循环依赖项添加了警告,我知道我可以使用“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)));
  }
}
import { Forms } from './forms.model';
import { CustomModel } from './custom.model';

export class CustomForm {
  nestedForms: Forms;

  constructor(model: CustomModel) {
    this.nestedForms = new Forms(model.nestedModels);
  }
}
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)));
  }
}
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);
  }
}
自定义.model.ts

export class CustomModel {
  nestedModels: CustomModel[];    
}
自定义.form.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)));
  }
}
import { Forms } from './forms.model';
import { CustomModel } from './custom.model';

export class CustomForm {
  nestedForms: Forms;

  constructor(model: CustomModel) {
    this.nestedForms = new Forms(model.nestedModels);
  }
}
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)));
  }
}
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);
  }
}
这会导致以下警告:

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条警告。 我认为底层插件支持排除模式,但我不确定是否有办法通过angular cli使用它。

问题很清楚:

您正在将
custom.model.ts
使用到
custom.form.ts

也可以将
custom.form.ts
转换为
custom.model.ts

这被称为循环依赖,这是不好的

解决方案:


只需从“/custom.form”中删除
import{CustomForm}
custom.model.ts

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

forms.model.ts使用custom.form.ts,custom.form.ts使用forms.model.ts这是依赖循环的原因,请通过更改模型来删除此关系

当您没有自定义表单,并且由于没有表单而无法创建自定义表单时,如何创建表单?(是的,您可以使用null或undefined,但这很难看)

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)));
  }
}
import { Forms } from './forms.model';
import { CustomModel } from './custom.model';

export class CustomForm {
  nestedForms: Forms;

  constructor(model: CustomModel) {
    this.nestedForms = new Forms(model.nestedModels);
  }
}
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)));
  }
}
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);
  }
}
自定义.form.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)));
  }
}
import { Forms } from './forms.model';
import { CustomModel } from './custom.model';

export class CustomForm {
  nestedForms: Forms;

  constructor(model: CustomModel) {
    this.nestedForms = new Forms(model.nestedModels);
  }
}
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)));
  }
}
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);
  }
}

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

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

啊,很抱歉,这个导入是在创建这个SO问题时偶然发生的。我现在把原来问题的那一行删去了。在这种情况下,删除导入没有帮助。循环依赖项是由对new Forms()和new CustomForms()的调用引起的。
custom.form.ts
没有导入到
custom.model.ts
。您能解释一下为什么循环依赖项“不好”吗?我可以在一个文件中包含两个函数,在某些情况下,每个函数都可以调用另一个。这也是一个循环依赖关系(每个函数都需要另一个函数才能存在),但我没有看到现代编译器抱怨过这种情况……我陷入了类似的情况,我所做的是创建一个外部共享模块,声明所有共享组件并定义导出组件,然后在使用模块时导入它们。这篇图坦卡蒙视频帮助我更好地理解了检查这是Angular Material components library为其Stepper和Step类所做的,因为它们相互引用。与其抑制警告,不如提供一个提示或修复方法。