Angular: How to resolve circular dependency between directive and component?

Question

I have a RadioButtonComponent and a RadioButtonGroupDirective which depend on each other:

RadioButtonComponent:

import { RadioButtonGroupDirective } from "./radio-button-group.directive";
...
constructor(@Optional() @Inject(forwardRef(() => RadioButtonGroupDirective)) radiobuttonGroup: RadioButtonGroupDirective, ...) {

RadioButtonGroupDirective:

import { RadioButtonComponent } from "./radio-button.component";
...
@ContentChildren(forwardRef(() => RadioButtonComponent))
private radioButtons: QueryList<RadioButtonComponent>;

With the latest webpack update in angular-cli, I get the following warning when building:

WARNING in Circular dependency detected:
lib\controls\radio-button\radio-button-group.directive.ts -> lib\controls\radio-button\radio-button.component.ts -> lib\controls\radio-button\radio-button-group.directive.ts

WARNING in Circular dependency detected:
lib\controls\radio-button\radio-button.component.ts -> lib\controls\radio-button\radio-button-group.directive.ts -> lib\controls\radio-button\radio-button.component.ts

In fact, the code works because I use forwardRef() in both cases, specifying that the other class might not be loaded yet. But how can I resolve the warning?

Usually, I would implement an interface for one of the two classes and use this but neither @Inject nor @ContentChildren can work with an interface, right?

If there is a RadioButtonGroup, I have to delegate certain input events of the RadioButton to it. But does this even make a difference? If I used @Input, I would still need a Reference to the Directive... — Shackles, Aug 23 '17 at 09:24
How are you using these two things in conjunction? Is the directive applied on the button (or group of buttons?) each time the button is used? Or is it not always one to one. Or one to many. Its hard to answer without knowing, but I will say there are almost no instances where using forwardRef to resolve a circular dependency is a good long term solution. — diopside, Aug 23 '17 at 10:16

score 1 · Answer 1 · answered Oct 11 '18 at 12:56

Arrange your files structure by purpose.
For every folder group, add an index.ts file.
Inside the index.ts, export your module, components, folder, and/or etc.

E.g. Inside component/shared/buttons/index.ts

export * from './radiobuttoncomponent';

outside the radiobutton folder add another index.ts with export * from './radiobutton';

In your import update the reference to use a general path

import { RadioButtonComponent} from "./shared";

Angular: How to resolve circular dependency between directive and component?

1 Answers1