<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import Index from './index';
export class Main {
    public index: Index;
    constructor() {
        this.index = new Index();
    }
}"><pre class="notranslate"><code class="notranslate">import Index from './index';
export class Main {
    public index: Index;
    constructor() {
        this.index = new Index();
    }
}
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {SomeSuperClass} from 'some.js';

export default class Index extends SomeSuperClass{
    constructor() {
        super();
    }
}"><pre class="notranslate"><code class="notranslate">import {SomeSuperClass} from 'some.js';

export default class Index extends SomeSuperClass{
    constructor() {
        super();
    }
}
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="declare module SOME {
    export class SomeSuperClass{
        constructor();
        execute();
    }
    export class SomeSubClass{
        constructor();
        execute();
    }
}

declare module 'some.js' {
    export = SOME;
}"><pre class="notranslate"><code class="notranslate">declare module SOME {
    export class SomeSuperClass{
        constructor();
        execute();
    }
    export class SomeSubClass{
        constructor();
        execute();
    }
}

declare module 'some.js' {
    export = SOME;
}
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="System.register(['./index'], function(exports_1) {
    var index_1;
    var Main;
    return {
        setters:[
            function (_index_1) {
                index_1 = _index_1;
            }],
        execute: function() {
            Main = (function () {
                function Main() {
                    this.index = new index_1.default();
                }
                return Main;
            })();
            exports_1(&quot;Main&quot;, Main);
        }
    }
});
"><pre class="notranslate"><code class="notranslate">System.register(['./index'], function(exports_1) {
    var index_1;
    var Main;
    return {
        setters:[
            function (_index_1) {
                index_1 = _index_1;
            }],
        execute: function() {
            Main = (function () {
                function Main() {
                    this.index = new index_1.default();
                }
                return Main;
            })();
            exports_1("Main", Main);
        }
    }
});

</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var __extends = (this &amp;&amp; this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        __.prototype = b.prototype;
        d.prototype = new __();
    };
System.register(['some.js'], function(exports_1) {
    var some_js_1;
    var Index;
    return {
        setters:[
            function (_some_js_1) {
                some_js_1 = _some_js_1;
            }],
        execute: function() {
            Index = (function (_super) {
                __extends(Index, _super);
                function Index() {
                    _super.call(this);
                }
                return Index;
            })(some_js_1.SomeSuperClass);
            exports_1(&quot;default&quot;, Index);
        }
    }
});"><pre class="notranslate"><code class="notranslate">var __extends = (this &amp;&amp; this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        __.prototype = b.prototype;
        d.prototype = new __();
    };
System.register(['some.js'], function(exports_1) {
    var some_js_1;
    var Index;
    return {
        setters:[
            function (_some_js_1) {
                some_js_1 = _some_js_1;
            }],
        execute: function() {
            Index = (function (_super) {
                __extends(Index, _super);
                function Index() {
                    _super.call(this);
                }
                return Index;
            })(some_js_1.SomeSuperClass);
            exports_1("default", Index);
        }
    }
});
</code></pre></div>
<p dir="auto">So is compiled by default and does not work. If you omit the __extends that work. Why? How can I fix it?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="System.register(['some.js'], function(exports_1) {
    var some_js_1;
    var Index;
    return {
        setters:[
            function (_some_js_1) {
                some_js_1 = _some_js_1;
            }],
        execute: function() {
            Index = (function (_super) {
                __extends(Index, _super);
                function Index() {
                    _super.call(this);
                }
                return Index;
            })(some_js_1.SomeSuperClass);
            exports_1(&quot;default&quot;, Index);
        }
    }
});
var __extends = (this &amp;&amp; this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        __.prototype = b.prototype;
        d.prototype = new __();
};"><pre class="notranslate"><code class="notranslate">System.register(['some.js'], function(exports_1) {
    var some_js_1;
    var Index;
    return {
        setters:[
            function (_some_js_1) {
                some_js_1 = _some_js_1;
            }],
        execute: function() {
            Index = (function (_super) {
                __extends(Index, _super);
                function Index() {
                    _super.call(this);
                }
                return Index;
            })(some_js_1.SomeSuperClass);
            exports_1("default", Index);
        }
    }
});
var __extends = (this &amp;&amp; this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        __.prototype = b.prototype;
        d.prototype = new __();
};
</code></pre></div>
<p dir="auto">Using this contrived example again,</p>
<p dir="auto">Export file with super class:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// foo.ts
export class Foo {
  a: string;
}"><pre class="notranslate"><span class="pl-c">/// foo.ts</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">Foo</span> <span class="pl-kos">{</span>
  <span class="pl-c1">a</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Import file with sub class:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// bar.ts
import {Foo} from './foo';

export class Bar extends Foo {
  b: string;
}"><pre class="notranslate"><span class="pl-c">/// bar.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Foo</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./foo'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">Bar</span> <span class="pl-k">extends</span> <span class="pl-smi">Foo</span> <span class="pl-kos">{</span>
  <span class="pl-c1">b</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">System.register format output:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// bar.js
var __extends = (this &amp;&amp; this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};System.register(['./foo'], function(exports_1) {
    var foo_1;
    var Bar;
    return {
        setters:[
            function (_foo_1) {
                foo_1 = _foo_1;
            }],
        execute: function() {
            Bar = (function (_super) {
                __extends(Bar, _super);
                function Bar() {
                    _super.apply(this, arguments);
                }
                return Bar;
            })(foo_1.Foo);
            exports_1(&quot;Bar&quot;, Bar);
        }
    }
});"><pre class="notranslate"><span class="pl-c">/// bar.js</span>
<span class="pl-k">var</span> <span class="pl-s1">__extends</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-smi">this</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">__extends</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">d</span><span class="pl-kos">,</span> <span class="pl-s1">b</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">var</span> <span class="pl-s1">p</span> <span class="pl-k">in</span> <span class="pl-s1">b</span><span class="pl-kos">)</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">b</span><span class="pl-kos">.</span><span class="pl-en">hasOwnProperty</span><span class="pl-kos">(</span><span class="pl-s1">p</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-s1">d</span><span class="pl-kos">[</span><span class="pl-s1">p</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">b</span><span class="pl-kos">[</span><span class="pl-s1">p</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
    <span class="pl-k">function</span> <span class="pl-c1">__</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">constructor</span> <span class="pl-c1">=</span> <span class="pl-s1">d</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
    <span class="pl-c1">__</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span> <span class="pl-c1">=</span> <span class="pl-s1">b</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">;</span>
    <span class="pl-s1">d</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">__</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span><span class="pl-v">System</span><span class="pl-kos">.</span><span class="pl-en">register</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'./foo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">exports_1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">foo_1</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-v">Bar</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">setters</span>:<span class="pl-kos">[</span>
            <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">_foo_1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">foo_1</span> <span class="pl-c1">=</span> <span class="pl-s1">_foo_1</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-en">execute</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-v">Bar</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">_super</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">__extends</span><span class="pl-kos">(</span><span class="pl-v">Bar</span><span class="pl-kos">,</span> <span class="pl-s1">_super</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-k">function</span> <span class="pl-v">Bar</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-s1">_super</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-smi">arguments</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span>
                <span class="pl-k">return</span> <span class="pl-v">Bar</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">foo_1</span><span class="pl-kos">.</span><span class="pl-c1">Foo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">exports_1</span><span class="pl-kos">(</span><span class="pl-s">"Bar"</span><span class="pl-kos">,</span> <span class="pl-v">Bar</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The output of System.register contains no namespace. This is not valid System.register bundle format output. When we bundle our files, our bundle will be broken with this output. To adhere to proper bundle format, the output would need to be:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/// bar.js
var __extends = (this &amp;&amp; this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};System.register('bar', ['./foo'], function(exports_1) {
    var foo_1;
    var Bar;
    return {
        setters:[
            function (_foo_1) {
                foo_1 = _foo_1;
            }],
        execute: function() {
            Bar = (function (_super) {
                __extends(Bar, _super);
                function Bar() {
                    _super.apply(this, arguments);
                }
                return Bar;
            })(foo_1.Foo);
            exports_1(&quot;Bar&quot;, Bar);
        }
    }
});"><pre class="notranslate"><span class="pl-c">/// bar.js</span>
<span class="pl-k">var</span> <span class="pl-s1">__extends</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-smi">this</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">__extends</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">d</span><span class="pl-kos">,</span> <span class="pl-s1">b</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">var</span> <span class="pl-s1">p</span> <span class="pl-k">in</span> <span class="pl-s1">b</span><span class="pl-kos">)</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">b</span><span class="pl-kos">.</span><span class="pl-en">hasOwnProperty</span><span class="pl-kos">(</span><span class="pl-s1">p</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-s1">d</span><span class="pl-kos">[</span><span class="pl-s1">p</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">b</span><span class="pl-kos">[</span><span class="pl-s1">p</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
    <span class="pl-k">function</span> <span class="pl-c1">__</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">constructor</span> <span class="pl-c1">=</span> <span class="pl-s1">d</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
    <span class="pl-c1">__</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span> <span class="pl-c1">=</span> <span class="pl-s1">b</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">;</span>
    <span class="pl-s1">d</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">__</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span><span class="pl-v">System</span><span class="pl-kos">.</span><span class="pl-en">register</span><span class="pl-kos">(</span><span class="pl-s">'bar'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'./foo'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">exports_1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">foo_1</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-v">Bar</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
        <span class="pl-c1">setters</span>:<span class="pl-kos">[</span>
            <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">_foo_1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">foo_1</span> <span class="pl-c1">=</span> <span class="pl-s1">_foo_1</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-en">execute</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-v">Bar</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">_super</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">__extends</span><span class="pl-kos">(</span><span class="pl-v">Bar</span><span class="pl-kos">,</span> <span class="pl-s1">_super</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-k">function</span> <span class="pl-v">Bar</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                    <span class="pl-s1">_super</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-smi">arguments</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
                <span class="pl-kos">}</span>
                <span class="pl-k">return</span> <span class="pl-v">Bar</span><span class="pl-kos">;</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-s1">foo_1</span><span class="pl-kos">.</span><span class="pl-c1">Foo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-s1">exports_1</span><span class="pl-kos">(</span><span class="pl-s">"Bar"</span><span class="pl-kos">,</span> <span class="pl-v">Bar</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Notice that the System.register call now has a namespace which matches the name of the file.<br>
This would help Angular out a lot.</p>
<p dir="auto">Thanks for all the hard work guys!</p>