Angular how to resolve "Circular dep for" error

Question

I´m making an angular library with 3 components :

• FrameComponent (not public)
• ApplicationComponent
• SectionComponent

ApplicationComponent extends FrameComponent.

SectionComponent should extend FrameComponent as well BUT ApplicationComponent contains x sectionComponent(s).

So if SectionComponent extends FrameComponent, I got this error:

ERROR Error: "Circular dep for SectionComponent"
    Angular 10
    SectionComponent_Factory section.component.ts:14
    Angular 5
    AppComponent_Template app.component.html:2
    Angular 20
    Angular 17

The exaclty reason, it´s because in SectionComponent, I have a Provider to get parent attributes.

@Component({
  selector: 'ui-section',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.scss'],
  providers:  [ provideParent( SectionComponent ) ]
})

export class SectionComponent extends FrameComponent implements OnInit, AfterViewInit {
  ...
  constructor( elRef: ElementRef, @Optional() public parent: Parent){

  }

}

if I comment /*@Optional() public parent: Parent*/ The error disappeared.

How can I do SectionComponent extend FrameComponent without circular dep error ?

Answer 1

The solution is @SkipSelf() for SectionComponent

export class SectionComponent extends FrameComponent implements OnInit, AfterViewInit {
    ...
    constructor( elRef: ElementRef, @SkipSelf() @Optional() public parent?: FrameComponent ) {

    }
}