typescript re-export modules with SystemJS not work

I Try to re-export modules according to typescriptlang web site - modules I use SystemJS as module loader :

app.ts

import * as s from "./AllValidators";

// Some samples to try
let strings = ["Hello", "98052", "101"];

// Validators to use
let validators: { [s: string]:s.StringValidator; } = {};
validators["ZIP code"] = new  s.ZipCodeValidator();
validators["Letters only"] = new s.LettersOnlyValidator();

// Show whether each string passed each validator
strings.forEach(s => {
for (let name in validators) {
    console.log(`"${s}" - ${validators[name].isAcceptable(s) ? "matches" :  "does not match"} ${name}`);
}
});

AllValidators.ts

 export * from "./Validation"; 
 export * from "./LettersOnlyValidator"; 
 export * from "./ZipCodeValidator";

LettersOnlyValidator.ts

import { StringValidator } from "./Validation";

const lettersRegexp = /^[A-Za-z]+$/;

 export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
    return lettersRegexp.test(s);
  }
}

Validation.ts

export interface StringValidator {
  isAcceptable(s: string): boolean;
}

ZipCodeValidator.ts

  import { StringValidator } from "./Validation";

   const numberRegexp = /^[0-9]+$/;

    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }

}

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="system.js"></script>
    <script src="typescript.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            packages: {
                src: {
                    defaultExtension: 'ts'
                }
            }
        });
        System
          .import('src/app')
          .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

When i run in the browser(Chrome) i see error in the console log:

Error: (SystemJS) Unexpected token export(…)

https://github.com/shorimiz/TypeScript/tree/master/TypeScript_Examples_In_VS2015/011_Module_Wrap_Other_Modules

Solution

The code in Validation.ts is not properly detected by SystemJS as using es6 features, so it skips compilation and tries to load that file as it is, causing the error.

The workaround is to declare the format explicitly - you need to add meta to src package configuration:

            src: {
                defaultExtension: 'ts',
                meta: {
                    '*.ts': {format: 'esm'}
                }
            }

The format is esm because SystemJS does not have separate format for typescript - it's the same es6 module, the only difference is that it has to be compiled by typescript compiler (all supported module formats are documented here)

Another, more ugly workaround is to add some dummy code at the beginning of Validation.ts so it would be auto-detected properly:

 export class __SomeUnusedName {}

is enough.