title: Configure SystemJS to load my Angular 2 component
body: <p>I am upgrading from ng1 to ng2. I added Angular 2 and successfully imported its modules:</p>
  
  <pre><code>&lt;script src="/node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
  &lt;script src="/node_modules/angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I added the following config:</p>
  
  <pre><code> &lt;script&gt;
          System.config({
            packages: {
              app: {
                format: 'cjs',
                defaultExtension: 'js'
              }
            }
          });
  
          System.import('scripts/bootstrap.js').then(null, console.error.bind(console));
  
   &lt;/script&gt;
  </code></pre>
  
  <p>Now I am trying to add my first ng2 component/ module and to import it:</p>
  
  <p>The component it written using TypeScript:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
    selector: 'my-component',
    templateUrl: 'app/components/my-component/my-component.html',
    styleUrls: ['app/components/my-component/my-component.css'],
    providers: [],
    directives: [],
    pipes: []
  })
  export default class MyComponent {
  
    constructor() {}
  
  }
  </code></pre>
  
  <p>importing my component:</p>
  
  <p><code>import MyComponent from './components/my-component/my-component';</code></p>
  
  <p>And component's ES5 compiled code is:</p>
  
  <pre><code>var __decorate = (this &amp;&amp; this.__decorate) || function (decorators, target, key, desc) {
      if (typeof Reflect === "object" &amp;&amp; typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
      switch (arguments.length) {
          case 2: return decorators.reduceRight(function(o, d) { return (d &amp;&amp; d(o)) || o; }, target);
          case 3: return decorators.reduceRight(function(o, d) { return (d &amp;&amp; d(target, key)), void 0; }, void 0);
          case 4: return decorators.reduceRight(function(o, d) { return (d &amp;&amp; d(target, key, o)) || o; }, desc);
      }
  };
  var core_1 = require('angular2/core');
  var MyComponent = (function () {
      function MyComponent() {
      }
      MyComponent = __decorate([
          core_1.Component({
              selector: 'my-component',
              templateUrl: 'app/components/my-component/my-component.html',
              styleUrls: ['app/components/my-component/my-component.css'],
              providers: [],
              directives: [],
              pipes: []
          })
      ], MyComponent);
      return MyComponent;
  })();
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.default = MyComponent;
  </code></pre>
  
  <p>The result is a 404 error looking for </p>
  
  <p><code>http://localhost:9000/scripts/components/my-component/my-component</code></p>
  
  <p>Now, I understand that I should either:</p>
  
  <ol>
  <li>Load my component file using <code>script</code> tag, similar to what I did with Angular2 bundles. This ends up with a JS error: <code>required</code> is undefined. This is because my file is not <code>bundled</code> correctly. </li>
  <li>Config SystemJS / Typescript so it will know to load my module without adding a script tag to my html.</li>
  </ol>
  
  <p>What am I missing here? </p>