WARNING in Circular dependency detected - Angular Cli

user_5464931 0
Viewed 104026

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.

angular-cli angular circular-dependency warnings
5 Answers

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

user_23494070

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

user_73329730

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

I'd like to add to this conversation that if you have circular dependency warnings and it isnt caused by imports from a barrel file that somehow cross reference each other, it might be provideIn: root that causes the circular dependency warning.

@Injectable({provideIn: root}) This made one of my services get provided either twice or provided in a file it shouldn't be while compiling.

user_35185850

You can also hide these circular CI warnings by adding the following line in your angular.json file

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