title: Angular2 - Uncaught ReferenceError: ng is not defined
body: <p>I'm trying to run a basic Angular2 app. However currently running into the following error when I run the app with <code>live-server</code> and <code>npm start</code>:</p>
  
  <p><code>Uncaught ReferenceError: ng is not defined</code></p>
  
  <p><a href="https://i.stack.imgur.com/AxwNt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AxwNt.png" alt="enter image description here"></a></p>
  
  <p>I have the latest Angular2 npm installed. Here is my markup:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"&gt;&lt;/script&gt;
  
          &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;first-comp&gt;&lt;/first-comp&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My app.js file:</p>
  
  <pre><code>var FirstComponent = ng.
      Component({
          selector: 'first-comp'  
      })
      .View({
          template: '&lt;h2&gt;I am learning {{ myFramework }}&lt;/h2&gt;'
      })
      .Class({
          constructor: function() {
              this.myFramework = "Angular2";
          }
      });
  
  document.addEventListener('DOMContentLoaded', function() {
      ng.bootstrap(firstComponent);
  });
  </code></pre>