Circular dependency with Angular 2 and SystemJS
<p>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 : <a href="https://github.com/Microsoft/TypeScript/issues/4341" rel="nofollow">TypeError: b is undefined in __extends</a> in TypeScript, but it didn't help me.</p>

<p>I have been able to simplify the problem in <a href="http://plnkr.co/edit/qWEdfEWIaSD2cCaeJ6JX" rel="nofollow">this plunker</a>.</p>

<p>Basically there are 3 classes : </p>

<ul>
<li>the class <code>A</code>, that contains an array of <code>A</code></li>
<li>the class <code>B</code>, that inherits from <code>A</code></li>
<li>the class <code>F</code>, a factory that can create an <code>A</code> or a <code>B</code> depending on a value</li>
</ul>

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

<p><code>TypeError: b is undefined
    Error loading http://localhost:3000/app/main.js</code></p>

<p>Here is the code of <strong>a.ts</strong></p>

<pre><code>import { F } from './f';

export class A {
  children: A[]

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

<p><strong>b.ts</strong></p>

<pre><code>import { A } from './a';

export class B extends A {
}
</code></pre>

<p>and <strong>f.ts</strong></p>

<pre><code>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
    }
  }
}
</code></pre>