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?

Answer 1

1. Arrange your files structure by purpose.

2. For every folder group, add an index.ts file.

3. 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";