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

Question

I have a RadioButtonComponent and a RadioButtonGroupDirective that are dependent 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 creating:

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, indicating that the other class is not yet loaded. But how can I resolve the warning?

Normally, I would implement an interface for one of the two classes and use it, but they can @Injectneither @ContentChildrenwork with the interface, right?