title: Angular 2 import custom component NOT FOUND
body: <p>I'm attempting to import a newly created component which is in the same root directory as the app.ts.</p>
  
  <pre><code>/
  -app.js
  -mock_feed_service.js
  </code></pre>
  
  <p>In <code>app.ts</code>:</p>
  
  <pre><code>import { mock_item_feed } from 'mock_feed_service';
  </code></pre>
  
  <p>Error message:</p>
  
  <pre><code>angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:63342/mock_feed_service(…)
  </code></pre>
  
  <p>The issue seems to be that the mock_feed_service call is missing the .js extension so the browser can't find it. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
      System.config({
          packages: {
              app: {
                  format: 'register',
                  defaultExtension: 'js',
              },
          },
      });
      System.import('app.js')
              .then(null, console.error.bind(console));
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have attempted to add: <code>"defaultJSExtensions": true</code>,</p>
  
  <p>Which appears to fix the NOT FOUND issue for this module, but then breaks all my other imports (rxjs/angular2 etc).</p>
  
  <p>e.g.</p>
  
  <pre><code>system.src.js:1085 GET http://rxjs/Rx.js 404 (Not Found)
  </code></pre>