JavaScript error: Unexpected anonymous System.register call

Question

There is a simple TypeScript project in Visual Studio 2015 with two TypeScript files:

foo.ts

export class Foo {
    bar(): string {
        return "hello";
    }
}

app.ts

/// <reference path="foo.ts"/>
import {Foo}  from './foo';
var foo = new Foo();

foo.ts is compiled into:

foo.js

System.register([], function(exports_1) {
    var Foo;
    return {
        setters:[],
        execute: function() {
            Foo = (function () {
                function Foo() {
                }
                Foo.prototype.bar = function () {
                    return "hello";
                };
                return Foo;
            })();
            exports_1("Foo", Foo);
        }
    }
});

When I load foo.js in html page, the Google Chrome console shows the error:

"system.src.js:4935 Uncaught TypeError: Unexpected anonymous System.register"

Obviously, this is because of the line

 System.register([], function(exports_1) 

Compiler options in tsconfig.json:

 {
 "compilerOptions": {
    "target": "es5",
    "module": "system"
  }
}

Script download in index.html:

<script src="./lib/system.js"></script>
<script src="./app/foo.js"></script>
<script src="./app/app.js"></script>

tsc version: 1.9.0-dev.20160322

When I don't import anything and put everything in one app.js file the code works properly, without any errors. How to overcome the error?

Answer 1

I have figured out what is the problem, I initialized the application in a wrong way.

Initialization should be added in index.html, something like this:

<script>
    System.config({
          packages: { 'app': { defaultExtension: 'js' } }
    });
    System.import('app/app');
</script>

And it was wrong to include foo.js and app.js in this way:

<script src="./app/foo.js"></script>
<script src="./app/app.js"></script>