Uncaught ReferenceError: System is not defined - Angular2
<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>