Angular with TypeScript: ReferenceError: System is not defined System.config

You need to have SystemJS included into your HTML page. To make work your Angular2 application from your node_modules folder, you need at least:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script> <!---
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

And configure SystemJS to load your compiled TypeScript (actually JavaScript one with a js extension). Something like that:

<script>
  System.config({
    map: {
      app: 'assets/js/app'
    },
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
</script>

This configuration means that when you try to import some modules starting with app/, SystemJS will load corresponding JS file (compiled from TypeScript one). For example: System.import('app/main'); will load the app/main.js file.

This means that you need to have compiled your TypeScript files before. When launching the npm run start command, the tsc compiler is automatically started in background and will compile TypeScript files into JS ones when changes will be detected. You can check that the compiler is actually started and you have the JS files created...

index.html

make sure to add following.

<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>


<script src="https://code.angularjs.org/tools/system.js"></script>
// error reason can be missing of this reference.


<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/http.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>