Issue 1:
import Index from './index';
export class Main {
public index: Index;
constructor() {
this.index = new Index();
}
}

import {SomeSuperClass} from 'some.js';

export default class Index extends SomeSuperClass{
constructor() {
super();
}
}

declare module SOME {
export class SomeSuperClass{
constructor();
execute();
}
export class SomeSubClass{
constructor();
execute();
}
}

declare module 'some.js' {
export = SOME;
}

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);
}
}
});

var __extends = (this && 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);
}
}
});

So is compiled by default and does not work. If you omit the __extends that work. Why? How can I fix it?

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 && 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 __();
};

Issue 2:
Using this contrived example again,

Export file with super class:

/// foo.ts
export class Foo {
a: string;
}

Import file with sub class:

/// bar.ts
import {Foo} from './foo';

export class Bar extends Foo {
b: string;
}

System.register format output:

/// bar.js
var __extends = (this && 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("Bar", Bar);
}
}
});

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:

/// bar.js
var __extends = (this && 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("Bar", Bar);
}
}
});

Notice that the System.register call now has a namespace which matches the name of the file.

This would help Angular out a lot.

Thanks for all the hard work guys!