title: Uncaught ReferenceError: System is not defined - Angular2
body: <p>The index.html page loads on the screen and shows loading. However I don't see the text  "My First Component " which i have defined in the template attribute of app.component.ts. When I do a F12 to open up developer tools , I see error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: System is not defined. </p>
  </blockquote>
  
  <p>It points to the first line in the app.component.js file. Can somebody tell me what the problem is ?</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'pm-app',
      template: `
      &lt;div&gt;
          &lt;h1&gt;{{pageTitle}}&lt;/h1&gt;
           &lt;div&gt; My First Component &lt;/div&gt;
       &lt;/div&gt;
       `
  
  })
  
  export class AppComponent {
      pageTitle: string = 'Hello World'; 
  }
  </code></pre>
  
  <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "ES5",
      "module": "system",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "moduleResolution": "node",
      "removeComments": false,
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    "exclude": [
      "node_modules"
    ]
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Angular 2 Application&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link href="app/app.component.css" rel="stylesheet" /&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;!-- IE required polyfills, in this exact order --&gt;
  
  
  
      &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
  
      &lt;script src="node_modules/rxjs/bundles/Rx.umd.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/@angular/core/core.umd.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/@angular/common/common.umd.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/@angular/compiler/compiler.umd.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/@angular/platform-browser/platform-browser.umd.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"&gt;&lt;/script&gt;
  
      &lt;script src='app/app.component.js'&gt;&lt;/script&gt;
      &lt;script src='app/main.js'&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt; 
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script&gt;
          System.config({
          packages: {
            app: {
              format: 'register',
              defaultExtension: 'js'
            }
          }
        });
        System.import('app/main')
              .then(null, console.error.bind(console));
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;pm-app&gt;Loading..&lt;/pm-app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { bootstrap } from '@angular/platform-browser-dynamic';
  
  // Our main component
  import { AppComponent } from './app.component';
  
  bootstrap(AppComponent);
  </code></pre>