WARNING in Circular dependency detected - Angular

Question

https://github.com/angular/angular-cli/pull/6813 Added warnings for circular dependencies, and I know I can turn off all warnings using "showCircularDependencies": false. But I would rather keep the circular dependency warnings on. Is there a pattern that will let me fix the use case below, or is there a way to specifically disable the circular dependency plugin on a particular file?

The simplest scenario is if I have 3 files:

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);
  }
}

This causes the following warnings:

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

In my actual app there are about 20-30 warnings because of this same pattern. I think the underlying plugin https://github.com/aackerman/circular-dependency-plugin supports exclude patterns, but i'm not sure if theres a way to use this via the angular-cli.

Answer 1

The forms.model.ts uses custom.form.ts, custom.form.ts uses forms.model.ts this is the cause of the dependency cycle, remove this relation by changing your model.

How do you create Forms when you don't have a CustomForm, and you cannot create CustomForm, because you don't have Forms? (Yes, you can use null or undefined but this is ugly)

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);
  }
}

Answer 2

You can have the code of forms.model.ts and custom.form.ts in the same file and that will remove the circular dependency.

Answer 3

The issue is clear :

You are using custom.model.ts into custom.form.ts

and also custom.form.ts into custom.model.ts,

This is called CircularDependencies and that is not good.

Solution :

Just remove import { CustomForm } from './custom.form'; from custom.model.ts