title: System.register-Issue setting up Angular Quickstart
body: <h2>Initial problem</h2>
  
  <p>Not sure if this is the right place to ask but I am facing this issue while setting up the quickstart tutorial for Angular. </p>
  
  <p>I am using gulp for tsc, bundling and hosting (gulp-)webserver.</p>
  
  <p>My tsc-gulp-task in the gulpfile.js looks like that:</p>
  
  <pre><code>var gulpTypescript = require('gulp-typescript');
  var tscConfig = require('./tsconfig.json');
  
  gulp.task('tsc', function () {
      return gulp.src('src/**/*.ts')
          .pipe(gulpTypescript(tscConfig.compilerOptions))
          .pipe(gulp.dest('/gen'));
  });
  </code></pre>
  
  <p>The main.ts looks like that (It's the one Angular2 Quickstart provides):</p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser';
  import {AppComponent} from './app.component';
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p>This task generates two .js-Files which I am concatenating with gulp-bundle-assets to the final main.js. This file is located in build/lib/</p>
  
  <p>My final bundled main.js looks like that (shortened):</p>
  
  <pre><code>System.register(['angular2/core'], function(exports_1, context_1) {
      var __moduleName = context_1 &amp;&amp; context_1.id;
      ..
  }};
  System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
      var __moduleName = context_1 &amp;&amp; context_1.id;    
      ..
  }};
  </code></pre>
  
  <p>The chrome console gives me the following error:</p>
  
  <blockquote>
    <p>Error: Multiple anonymous System.register calls in module <a href="https://localhost:8000/lib/main.js" rel="nofollow noreferrer">https://localhost:8000/lib/main.js</a>. If loading a bundle, ensure all the System.register calls are named.</p>
  </blockquote>
  
  <p>So actually I don't know what is wrong with the main.js. Maybe someone else does?</p>
  
  <h2>New problem (after solving the upper one)</h2>
  
  <p>There are no console error logs shown in Chrome anymore - That's cool, but the Angular module is still not loading..</p>
  
  <p>I guess that there is a problem with the System.js loader and my bundled main.js file (which actually is not the compiled main.ts file - It is the bundled main.js + app.component.js file - Renaming might be good..).</p>
  
  <p>My index.html looks like that:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;index.html&lt;/title&gt;
      &lt;link rel="stylesheet" href="./lib/main.css"&gt;
      &lt;script type="text/javascript" src="lib/vendor.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          System.config({
              packages: {
                  lib: {
                      format: 'register',
                      defaultExtension: 'js'
                  }
              }
          });
          System.import('lib/main')
                  .then(null, console.error.bind(console));
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The build/-directory (which is the root directory for gulp-webserver) is structured like that:</p>
  
  <ul>
  <li>build/
  
  <ul>
  <li>lib/
  
  <ul>
  <li>maps/</li>
  <li>main.css</li>
  <li>main.js</li>
  <li>vendor.js // bundled node_module-files</li>
  </ul></li>
  <li>index.html</li>
  </ul></li>
  </ul>
  
  <p>When I split the main.js into main.js + app.component.js (and modify the references in the index.html) then the Angular-Module is loading fine.</p>