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

Question

I tried to install Angular 2 for TypeScript according to this tutorial: https://angular.io/guide/quickstart

And I am getting this error:

ReferenceError: System is not defined System.config

I don't know how this happens.

the folder structure:

project
|-index.hml
|-assets
    |-js
    |- jquery
    |-app
       |-app.component.js
       |-app.component.ts
       |-app.component.js.map
       |-main.js
       |-main.ts
       |-main.js.map

Answer 1

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...

Answer 2

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>

Answer 3

This is a duplicate for angular2js: Uncaught Reference Error: System is not defined

In case of Angular2 Seed already implemented injections and required libs loading mechanism you should just use those methods.

In case of you are creating app from scratch you can include libs as you want as described above.