Default Extension Not Working - SystemJS
<p>So I'm working on an NG2 + Typescript + SystemJS project - I've followed the official angular quick start and my project works fine... until I use Gulp to compile the TS and move the source to a dist directory. Here is the directory structure:</p>

<p><a href="https://i.stack.imgur.com/kctqW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kctqW.png" alt="enter image description here"></a></p>

<p>By default, the TS compiler output the JS files right alongside the src files in app and the site worked fine. However, I configured it to output into dist as shown above and now it does not work. It appears that it can find main.js in dist but it cannot find the other files such as dist/services/* and it looks like the cause is SystemJS does not add the default extension of "js". </p>

<p><a href="https://i.stack.imgur.com/wrpVF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wrpVF.png" alt="enter image description here"></a></p>

<p><em>index.html</em>

  </p>

<pre><code>&lt;base href="/"&gt;

&lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;   

&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
&lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"&gt; 
&lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"&gt;

&lt;link rel="stylesheet" href="styles/structure.css"&gt;

&lt;link rel="stylesheet" href="styles/styles.css"&gt;
&lt;link rel="stylesheet" href="styles/skins/minimal.css"&gt;
&lt;link rel="stylesheet" href="styles/skins/usb.css"&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/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;   
&lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
&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/router.dev.js"&gt;&lt;/script&gt;
&lt;script src="node_modules/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
&lt;!-- 2. Configure SystemJS --&gt;
&lt;script&gt;
  System.config({
    packages: {        
      dist: {
        format: 'register',
        defaultExtension: 'js',
        defaultJSExtension: true
      }
    }
  });

  System.import('dist/main')
        .then(null, console.error.bind(console));
&lt;/script&gt;
</code></pre>

<p>
  
  
    Loading...
  
</p>

<p>Note that when I put:</p>

<pre><code>  System.import('app/main')
        .then(null, console.error.bind(console));
</code></pre>

<p>And set the compiler to output alongside the source files, it all works great. But when I switch the import to dist/main, it fails as mentioned above.</p>

<p><strong>Q</strong> How do I get SystemJS to add the default JS extension in this situation?</p>