title: Angular2 with Typescript - Error loading angular2/platform/browser
body: <p>I have spent way too much time on this, but I am stuck and can't figure out how to get Angular2 with Typescript to run.  I keep getting a 404 for the components:</p>
  
  <p>Error loading <a href="http://localhost:5000/angular2/platform/browser" rel="noreferrer">http://localhost:5000/angular2/platform/browser</a> as "angular2/platform/browser" from <a href="http://localhost:5000/appScripts/boot.js" rel="noreferrer">http://localhost:5000/appScripts/boot.js</a></p>
  
  <p><a href="https://i.stack.imgur.com/Qm8st.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Qm8st.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my folder structure:<a href="https://i.stack.imgur.com/FHWSF.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/FHWSF.jpg" alt="enter image description here"></a></p>
  
  <p>My index.html is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Angular 2 with ASP.NET Core&lt;/title&gt;
  &lt;!-- 1. Load libraries --&gt;
  &lt;script src="libs/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
  &lt;script src="libs/zone.js/dist/zone.js"&gt;&lt;/script&gt;
  &lt;script src="libs/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
  &lt;script src="libs/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
  
  &lt;!-- 2. Configure SystemJS --&gt;
  &lt;script src="./appScripts/config.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      System.import('appScripts/boot')
            .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 boot.ts:</p>
  
  <pre><code> /// &lt;reference path="../node_modules/angular2/typings/browser.d.ts" /&gt;
      import {bootstrap} from 'angular2/platform/browser'
      import {AppComponent} from './app'
      bootstrap(AppComponent);
  </code></pre>
  
  <p>The app.ts:</p>
  
  <pre><code>    /// &lt;reference path="../typings/jquery/jquery.d.ts" /&gt;
      /// &lt;reference path="../typings/angularjs/angular-route.d.ts" /&gt;
      /// &lt;reference path="../typings/angularjs/angular.d.ts" /&gt;
  
      import {Component} from 'angular2/core';
      @Component({
      selector: 'my-app',
      template: 'My First Angular 2 App'
      })
      export class AppComponent { }
  </code></pre>
  
  <p>The config.js</p>
  
  <pre><code>(function (global) {
  
      // map tells the System loader where to look for things
      var map = {
          'app': 'appScripts', // 'dist',
          'rxjs': 'libs/rxjs',
          'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
          '@angular': 'libs/@angular'
      };
  
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
          'app': { main: 'boot.js', defaultExtension: 'js' },
          'rxjs': { defaultExtension: 'js' },
          'angular2-in-memory-web-api': { defaultExtension: 'js' },
      };
  
      var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade',
      ];
  
      // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
      packageNames.forEach(function (pkgName) {
          packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
      });
  
      var config = {
          map: map,
          packages: packages
      }
  
      // filterSystemConfig - index.html's chance to modify config before we register it.
      if (global.filterSystemConfig) { global.filterSystemConfig(config); }
  
      System.config(config);
  
  })(this);   
  </code></pre>
  
  <p>Here is more of the folder structure to give you a better idea of the project structure.
  <a href="https://i.stack.imgur.com/pt7WI.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/pt7WI.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my package.json</p>
  
  <pre><code>{
    "version": "1.0.0",
    "name": "ASP.NET",
    "private": true,
    "dependencies": {
      "@angular/common": "2.0.0-rc.1",
      "@angular/compiler": "2.0.0-rc.1",
      "@angular/core": "2.0.0-rc.1",
      "@angular/http": "2.0.0-rc.1",
      "@angular/platform-browser": "2.0.0-rc.1",
      "@angular/platform-browser-dynamic": "2.0.0-rc.1",
      "@angular/router": "2.0.0-rc.1",
      "@angular/router-deprecated": "2.0.0-rc.1",
      "@angular/upgrade": "2.0.0-rc.1",
      "systemjs": "0.19.27",
      "es6-shim": "^0.35.0",
      "reflect-metadata": "0.1.2",
      "rxjs": "5.0.0-beta.6",
      "zone.js": "^0.6.12",
      "angular2-in-memory-web-api": "0.0.7"
    },
    "devDependencies": {
      "gulp": "^3.9.0",
      "gulp-autoprefixer": "~3.1.0",
      "gulp-concat": "~2.6.0",
      "gulp-imagemin": "~2.4.0",
      "imagemin-pngquant": "~4.2.0",
      "jshint": "2.9.2",
      "gulp-jshint": "2.0.0",
      "jshint-stylish": "~2.1.0",
      "rimraf": "~2.5.1",
      "gulp-minify-css": "~1.2.4",
      "gulp-sass": "2.2.0",
      "gulp-uglify": "~1.5.1",
      "gulp-sourcemaps": "~1.6.0",
      "gulp-plumber": "1.1.0",
      "gulp-notify": "2.2.0",
      "beepbeep": "1.2.0",
      "gulp-rename": "1.2.2",
      "gulp-sourcemap": "1.0.1",
      "gulp-clean-css": "2.0.6",
      "main-bower-files": "2.13.0",
      "gulp-filter": "4.0.0",
      "typescript": "^1.8.10",
      "gulp-typescript": "^2.13.1",
      "live-server": "1.0.0",
      "typings": "^1.0.4",
      "gulp-tsc": "^1.1.5"
    }
  }
  </code></pre>
  
  <p>Thank you in advance for your help and please let me know if I can provide some more details.</p>