0

I'm getting a circular dependency error on my @ComponentBuilderService service, because some of the components that I'm importing in ie.BreakComponent,LocationComponent use this service and also import this @ComponentBuilderService.

What I'm trying to do is use the buildComponents() method inside this @ComponentBuilderService to be able to dynamically create components, the problem is some of the components need to use this buildComponents() method on this same service to build their sub-components.

@ComponentBuilderService:

@Injectable()
export class ComponentBuilderService {
    private renderer: Renderer2;
    constructor(private resolver: ComponentFactoryResolver, renderFactory: RendererFactory2) {
        this.renderer = renderFactory.createRenderer(null, null);
    }
    buildComponents(nContainer: ViewContainerRef , elements) {
        // loop through elements creating different components based on element.Type
        elements.forEach((element, idx) => {
            switch (element.Type) {
                case 'break':
                    const breakComponent = nContainer.createComponent(this.resolver.resolveComponentFactory(BreakComponent));
                    console.log(breakComponent.location.nativeElement);
                    break;
                case 'location':
                    const locationComponent = nContainer.createComponent(this.resolver.resolveComponentFactory(LocationComponent));
                    locationComponent.instance.Elements = element.Elements;
                    break;
            }
        });
    }
}

@LocationComponent:

import { Component, AfterContentInit } from '@angular/core';
import { ComponentBuilder } from '../../../shared/services/component-build.service';

@Component({
  selector: 'location',
  template: `<div> some location building </div>`,
  styleUrls: ['./location.component.scss'],
})
export class LocationComponent implements  AfterContentInit {
    Elements;
    constructor(private componentBuilder: ComponentBuilder) { }
    ngAfterContentInit() {
        console.log(this.Elements);
        this.componentBuilder.buildComponents(this.Elements);
    }
}

Question: Is there anyway to create a ComponentBuilderService?

Anuradha Gunasekara
  • 6,553
  • 2
  • 27
  • 37
Jordan Davis
  • 378
  • 1
  • 4
  • 14
  • Take a look at [this answer](https://stackoverflow.com/a/41807414/2227788). I recall having a `circular dependency` issue once before and I remember resolving it using the `Injector` somehow, as mentioned in this answer. – Aamir Khan May 22 '18 at 07:40
  • How your elements model looks like? Can you share how you create your dynamic child (sub) components? – sugarme May 22 '18 at 08:09

0 Answers0