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
– Shackles, Commented Aug 23, 2017 at 9: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
– diopside, Commented Aug 23, 2017 at 10:16

ランス · Accepted Answer · 2018-10-11 12:56:21Z

1

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

answered Oct 11, 2018 at 12:56

ランス

6003 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related