Angular2 - Dependency injection not working when injected into a dynamic component of cyclic reference

Question

I have a situation where based on the input selected (radio or checkbox), I add a component dynamically through ajax.

Plunkr: https://plnkr.co/edit/uvGo3RxCkUPeuknVu9m8?p=preview

I explain the flow for better understanding:

First Layer: src/parent/parent.ts

We get the json response from questions.json and populate the questions.

Based on the controlType we load either a-component or b-component in src/parent/parent.html.

When I select a checkbox in a-component or a radio button in b-component, I call createDynamicComponent() and pass in the componentData.

componentData is nothing but the metadata information on the next component that needs to be populated, based on the selected option.

Now, the componentData is passed into the dynamic-component from src/controls/a.html or src/controls/b.html

Inside dynamic-component, I resolve the provider and inject the questions data into the entryComponents, (a-component and b-component)

Everything was working fine, until I introduced a HService (which holds the component data building logic) inside both a-component and b-component.

I am getting the following error, Error: Can't resolve all parameters for BComponent: ([object Object], [object Object], ?)

The last parameter being the HService inside the constructor of b-component, If I take out the service and use the commented code, everything works fine.

this.componentData = {
  'questions': {
    "question": "This is a " + this.level + " level question?",
    "controlType": "radio",
    "answers": [
        "Yes",
        "No",
        "None"
    ]
  },
  "component": BComponent,
  "level": this.level
};

Edit 1: I have the HService injected into a-component already and there is no provider resolve error and it is working fine. Only on adding it to b-component, I face the error.

Help will be much appreciated!!

yurzui · Accepted Answer · 2017-09-25 11:05:04Z

3

I think the problem is based on circular dependencies.

A <=> HService and B <=> HService

To solve it i would unleash dependencies by creating abstract class for HService and use it as token:

base.h.ts

export abstract class BaseHService {
    private componentData: any;

    abstract getComponentData(queries: IQ[], level: number): any;
}

app.module.ts

providers: [ 
  { provide: BaseHService, useClass: HService }, <== this line
  { provide: 'questions', useValue: {} }, 
  { provide: 'level', useValue: 1 }
],

a.ts

import { BaseHService } from "../h/base.h";
...
constructor(...private _h: BaseHService) {

b.ts

import { BaseHService } from "../h/base.h";
...
constructor(...private _h: BaseHService) {

Modified Plunker

edited Sep 25, 2017 at 11:05

answered Apr 4, 2017 at 5:09

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

3 Comments

eko Over a year ago

Nice catch but do you think this is a good pattern to follow? I mean a component creating a dynamic component in itself with the same type.. recursively adding it to itself.. mind.. blown. The dynamic component injection part should be seperated in a service in my opinion but not sure.

MrVinay1989 Over a year ago

@yurzui thanks for the solution. It is working great. So much to understand and learn in Angular2

MrVinay1989 Over a year ago

@echonax I am thinking of making the dynamic component injection part into a service. Will look into it.

Collectives™ on Stack Overflow

Angular2 - Dependency injection not working when injected into a dynamic component of cyclic reference

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related