title: Circular dependency with Angular 2 and SystemJS
body: <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>