CODEWITHSUNDEEP
angulartypescriptextends
karthi keyan
karthi keyan

Reputation: 53

TypeScript Circular Dependency

I have 2 classes, Class A and ClassB. Class B extends Class A so that I can access the instances and services of Class A. Class B has some functions which I will use in Class A. When I implemented this, circular Dependency error showed up and now I get a browser error saying:

"tslib.es6.js:25 Uncaught TypeError: Object prototype may only be an Object or null: undefined".


import { BuyerCardComponent} from './buyer-card.component'

export class BuyerCardExtended extends BuyerCardComponent{
  func a(){
    do_something;
  }
}


import { BuyerCardExtended } from './buyer-card-extended'

class BuyerCardComponent {
constructor(private buyerCardExtended: BuyerCardExtended){}
  func b(){
    this.buyerCardExtended.a()
  }
}

WARNING in Circular dependency detected: src/app/components/buyer/products/buyer-card/buyer-card.component.ts -> src/app/components/buyer/products/buyer-card/buyer-card-extended.ts -> src/app/components/buyer/products/buyer-card/buyer-card.component.ts

Browser :

"tslib.es6.js:25 Uncaught TypeError: Object prototype may only be an Object or null: undefined"

Upvotes: 1

Views: 3450

Answers (2)

M M
M M

Reputation: 725

If you want to call a child class method from a parent class, use @ViewChild decorator.

import { BuyerCardExtended } from './buyer-card-extended'

class BuyerCardComponent implements AfterViewInit {
@ViewChild(BuyerCardExtended) childCmp : BuyerCardExtended;
constructor(){}
ngAfterViewInit(){
  func b(){
    this.childCmp.a(); }
  }
}

See also this stackoverflow thread

Upvotes: 0

Puria Rad Jahanbani
Puria Rad Jahanbani

Reputation: 612

The main reason behind this scenario is this sequence: When you execute Class A, it automatically imports Class B. Inside Class B you import Class A which automatically imports Class B once again. This sequence happens again and again and eventually cause circular dependency.

First solution is to create another Class and import all dependencies into that. Or if you just want to share some functions and variables between the two classes, I suggest you to use a shared service and declare all functions in that. Then, import the service into your components or Classes.

Upvotes: 0

Related Questions