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

<script src="node_modules/systemjs/dist/system.src.js"></script> — Fabio Santos
– Fabio Santos, Commented Mar 3, 2016 at 16:37
I understand that. What you have done is, you have installed all packages npm and referencing them. I have shown you CDN/online references. Just try it once. Add all mentioned references to index.html and check if still error occurs! — micronyks
– micronyks, Commented Mar 3, 2016 at 16:42
now i get : Error: Unable to load script file:///D:/zontal-admin/app/main.js Error loading file:///D:/zontal-admin/app/main.js — Fabio Santos
– Fabio Santos, Commented Mar 3, 2016 at 16:47
1) Do you have that file in that path? 2)Do you use local server to run the app? — micronyks
– micronyks, Commented Mar 3, 2016 at 16:51

Thierry Templier · Accepted Answer · 2016-03-03 18:24:56Z

3

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

edited Mar 3, 2016 at 18:24

answered Mar 3, 2016 at 17:12

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

25 Comments

Fabio Santos Over a year ago

GIve me the same error if i put this:<script src="code.angularjs.org/tools/system.js"></script> he give another error

Fabio Santos Over a year ago

he said:Error: Unable to load script file:///D:/zontal-admin/app/main.js Error loading file:///D:/zontal-admin/app/main.js because i have my app inside assets\js\app

Thierry Templier Over a year ago

You could try to add a map block in your SystemJS configuration. Something like that: System.config({ map: { app: 'assets/js/app' }, packages: { ... } });

Fabio Santos Over a year ago

it still don't work, i don't how change the directory

Thierry Templier Over a year ago

When is your HTML entry point file located? Could you also provide in your question the structure of your projects (folders, ts files and compiled js files)? Thanks!

|

micronyks · Accepted Answer · 2016-03-03 16:29:38Z

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>

answered Mar 3, 2016 at 16:29

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

1 Comment

Fabio Santos Over a year ago

now i get : Error: Unable to load script file:///D:/zontal-admin/app/main.js Error loading file:///D:/zontal-admin/app/main.js

Community · Accepted Answer · 2017-05-23 12:26:04Z

1

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.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Mar 1, 2017 at 12:56

Samuel Ayvazyan

2234 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

25 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

25 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related