title: Angularjs 2 & Typescript import issue (systemjs?)
body: <p>My app is structure like so:</p>
  
  <pre><code>app
  - assets
  - src
  -- autogenerated
  -- components
  ---- app
  ---- tabs
  </code></pre>
  
  <p>The "autogenerated" folder contains the compiled javascript files generated from typescript using the same directory structure from the components folder. I use gulp-tsc to create it. (I'll eventually rename this to "build")</p>
  
  <p>app, and tabs are components... app being the top level component.</p>
  
  <p>In app.ts (in app/components/app) is:</p>
  
  <pre><code>import {Component, bootstrap} from 'angular2/angular2';
  import {Tabs} from '../Tabs/tabs';
  @Component({
      selector: 'my-app',
      templateUrl: 'src/components/app/app.html',
      directives: [Tabs]
  })
  class AppComponent { }
  bootstrap(AppComponent);
  </code></pre>
  
  <p>When this compiles, the generated js file has this:</p>
  
  <pre><code>var tabs_1 = require('../Tabs/tabs');
  </code></pre>
  
  <p>which does not resolve and results in a 404 since it has no .js extension when being loaded by the browser.</p>
  
  <p><strong>Edit...</strong> just realized that "require" is from nodejs, not systemjs... still not sure how to proceed.</p>
  
  <p>** Edit 2 ** The gulp task:</p>
  
  <pre><code>gulp.task('compile', function() {
    // compile sass to css
    gulp.src('./app/assets/sass/*.scss')
      .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(gulp.dest('./app/assets/css'));
  
    // compile typescript
    // this ignores tsconfig.json, but ideally configuration in both places should match
    gulp.src(['./app/src/**/*.ts'])
      .pipe(typescript({  target: "ES5",
                          experimentalDecorators: true,
                          sourceMap: true,
                          emitDecoratorMetadata: true }))
      .pipe(gulp.dest('./app/src/autogenerated/'));
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/quqDP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/quqDP.png" alt="enter image description here"></a></p>
  
  <p>The gulp task shouldn't be using the tsconfig.json... I added it to remove the error in visual studio code.... but here's whats in the tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "ES5",
      "module": "commonjs",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    }
  }
  </code></pre>
  
  <p>index.html code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
      &lt;script src="../../node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="../../node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    System.config({
      packages: {'app': {
          defaultExtension: 'js'}
        }
    });
    System.import('../src/components/app/app.js');
  &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;my-app&gt;Loading... please wait&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>