Angular2 systemjs.config.js ' "ReferenceError: System is not defined"

Question

I have read all the other posts with this identical issue, but haven't been able to resolve the problem.

If I compile to javascript in the browser, I get two 404 errors for @angular/http and @angular/core.

When I set the config file to transpile first, I get a compilation error in system.config.js:

'ReferenceError: System is not defined' at this line

  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

I started the project from the quick-start guide and Tour of Heros Http sample.

After comparing all my files against those in the quick-start, I went through and copied the quick start files into my project.

I'm sure I'm missing something basic, but have hit a dead end. FYI: I am new to Angular and Angular2. Using WebStorm to develop and compile.

Here is the index.html and systemjs.config.js

//system.config.js
(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

<!DOCTYPE html>
<html>
  <head>
    <title>Generic Form</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="forms.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
    <script src="https://npmcdn.com/[email protected]?main=browser"></script>
    <script src="https://npmcdn.com/[email protected]"></script>
    <script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

Edit: This is the point in my http-service.component.ts file where I receive the 404 errors:

import { Injectable } from '@angular2/core';
import { Http, Response } from '@angular2/http';
import { Headers, RequestOptions } from '@angular2/http';
import { Observable } from 'rxjs/Observable';

Please let me know what other files will help. I appreciate any insight!

Do you see the js files in your directory? how do you build the project? — Avi
– Avi, Commented Jun 27, 2016 at 18:51
I can see http and core in the node_modules/@angular folder. — saka
– saka, Commented Jun 27, 2016 at 18:59
I'm using SystemJS to bundle things and I'm just (building?) running it from WebStorm — saka
– saka, Commented Jun 27, 2016 at 19:03
which version of angular 2 are you using? beta version of angular used 'angular2' on the imports where current rc version use '@angular' - fairly sure this is where your error is — Jarod Moser
– Jarod Moser, Commented Jun 27, 2016 at 19:06
in my packages I have mostly "2.0.0-rc.3" (for common, compiler, core, http, platform-browser etc). — saka
– saka, Commented Jun 27, 2016 at 19:13

Jarod Moser · Accepted Answer · 2016-06-27 19:28:40Z

1

current versions of angular 2 use '@angular' instead of what beta was using 'angular2'

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';

answered Jun 27, 2016 at 19:28

Jarod Moser

7,4182 gold badges29 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Angular2 systemjs.config.js ' "ReferenceError: System is not defined"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related