<p dir="auto">Hey guys, I'm from the Angular team and we are currently trying to use the TypeScript compiler to compile the project to system.register format. In the process, I noticed a bug with the output. I've cloned your branch <strong>release1.5</strong> to make sure that it wasn't just a bug on our end.</p>
<p dir="auto">Here is a small example that I have composed independent of the Angular project.</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 <strong>__extends</strong> function is being defined outside of the context of System.register. Systemjs uses a number of regex expressions to determine the format of the file that it is reading. It won't recognize this output.</p>
<p dir="auto">I would suggest modifying the output as so:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="System.register(['./foo'], function(exports_1) {
    var __extends = (window &amp;&amp; window.__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 __();
    };
    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-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">__extends</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-smi">window</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">window</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-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">My systemjs module is version @0.18.1</p>
<p dir="auto"><strong>TypeScript Version:</strong> 1.8.x</p>
<p dir="auto">The tsconfig.json can list compileOnSave which is nicely supported in VS. To make that work on VS Code as well the necessary support should come from the tsserver. We could either send the tsserver and event when a file is saved or the tsserver could make use of its file eventing to detect the case.</p>