Circular dependency with Angular 2 and SystemJS

Question

I have a problem that I think is caused by a circular dependency. After some extensive research, I haven't been able to find a solution. It looks related to this issue : TypeError: b is undefined in __extends in TypeScript, but it didn't help me.

I have been able to simplify the problem in this plunker.

Basically there are 3 classes :

the class A, that contains an array of A
the class B, that inherits from A
the class F, a factory that can create an A or a B depending on a value

The purpose of this is to handle a parameter list that can be dynamic (each A is a parameter and can be an array) and where B is a specialization of A to handle files. I tried removing the factory, but with only A and B I still get the same error :

TypeError: b is undefined Error loading http://localhost:3000/app/main.js

Here is the code of a.ts

import { F } from './f';

export class A {
  children: A[]

  constructor(hasChildren: boolean = false) {
    if (hasChildren) {
      for (var i = 0 ; i < 10 ; ++i) {
        let isB = (Math.random() * 2) > 1;
        this.children.push(F.createObject(isB))
      }
    }
  }
}

b.ts

import { A } from './a';

export class B extends A {
}

and f.ts

import { A } from './a'
import { B } from './b'

export class F {
  static createObject(isB: boolean): A {
    if (isB) {
      return new B
    } else {
      return new A
    }
  }
}

Where's the line containing the `b` mentioned in the error message? — Günter Zöchbauer, Mar 29 '16 at 08:12
In the javascript console. Actually if the classes are named `toto` and `tata` the error message is still `TypeError: b is undefined Error loading http://localhost:3000/app/main.js` — Sunder, Mar 29 '16 at 08:21
For me neither... I'll change the link in 2 minutes, I'm doing a plunker without the factory. — Sunder, Mar 29 '16 at 08:25
I think it's a duplicate (see above). See also https://github.com/Microsoft/TypeScript/issues/6516 — Günter Zöchbauer, Mar 29 '16 at 08:41
It is indeed a duplicate of the link above. Simply putting the two classes in the same file worked, thanks. Here is the working plunker if it can help : http://plnkr.co/edit/fi2MAGeA7MjdqewZcyjb — Sunder, Mar 29 '16 at 08:49

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

You can't have a circular dependency this way. You can work around by using an interface

Plunker example

tata.ts

import { IToto } from './itoto';


export class Tata implements IToto {
  children: Toto[]
}

toto.ts

import { Tata } from './tata';
import { IToto } from './itoto';

export class Toto implements IToto{
  children: Toto[] = [];

  constructor(hasChildren: boolean = false) {
     ...
  }
}

itoto.ts

export interface IToto {
  children: Toto[]
}

See also Circular dependency injection angular 2

edited May 23 '17 at 12:09

Community

1
1

answered Mar 29 '16 at 08:47

Günter Zöchbauer

623,577
216
2,003
1,567

2

I don't get it - itoto imports itself? – itamar Sep 21 '16 at 09:58
yeah this is confusing, not getting it either... – Starwave Oct 28 '16 at 09:40
I have posted an answer on this post http://stackoverflow.com/a/41807260/6903440 – Lievno Jan 23 '17 at 13:18

Circular dependency with Angular 2 and SystemJS

1 Answers1

Linked