WARNING in Circular dependency detected - Angular Cli

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 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