title: Angular2 systemjs.config.js ' "ReferenceError: System is not defined"
body: <p>I have read all the other posts with this identical issue, but haven't been able to resolve the problem.</p>
  
  <p>If I compile to javascript in the browser, I get two 404 errors for @angular/http and @angular/core.</p>
  
  <p>When I set the config file to transpile first, I get a compilation error in system.config.js:</p>
  
  <p>'ReferenceError: System is not defined' at this line</p>
  
  <pre><code>  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  </code></pre>
  
  <p>I started the project from the quick-start guide and Tour of Heros Http sample.</p>
  
  <p>After comparing all my files against those in the quick-start, I went through and copied the quick start files into my project.</p>
  
  <p>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.</p>
  
  <p>Here is the index.html and systemjs.config.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Generic Form&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;link rel="stylesheet" href="forms.css"&gt;
  
      &lt;!-- Polyfill(s) for older browsers --&gt;
      &lt;script src="https://npmcdn.com/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://npmcdn.com/zone.js@0.6.12?main=browser"&gt;&lt;/script&gt;
      &lt;script src="https://npmcdn.com/reflect-metadata@0.1.3"&gt;&lt;/script&gt;
      &lt;script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        System.import('app').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  Edit: This is the point in my http-service.component.ts file where I receive the 404 errors:</p>
  
  <pre><code>import { Injectable } from '@angular2/core';
  import { Http, Response } from '@angular2/http';
  import { Headers, RequestOptions } from '@angular2/http';
  import { Observable } from 'rxjs/Observable';
  </code></pre>
  
  <p>Please let me know what other files will help. I appreciate any insight!</p>