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