title: angular2 with ASP.NET 5 working in Chrome but not in Firefox and IE (Error in zone.js)
body: <p>Basic Problem with the following configuration is, that it is working in Chrome without exceptions. But FF and IE are throwing exceptions from zone.js. Alle files seem to be adressed correctly (no html instead of js in 404 case), but im still getting this errors:</p>
  
  <p>Firefox</p>
  
  <blockquote>
    <p>mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create es6-shim.js:1541:11</p>
    
    <p>Error: Zonehttp://localhost:5301/js/zone.js:323:20
        Zonehttp://localhost:5301/js/zone.js:216:25
        scheduleResolveOrReject/&lt;@<a href="http://localhost:5301/js/zone.js:571:53" rel="nofollow">http://localhost:5301/js/zone.js:571:53</a>
        Zonehttp://localhost:5301/js/zone.js:356:24
        Zonehttp://localhost:5301/js/zone.js:256:29
        drainMicroTaskQueue@<a href="http://localhost:5301/js/zone.js:474:26" rel="nofollow">http://localhost:5301/js/zone.js:474:26</a>
        ZoneTask/this.invoke@<a href="http://localhost:5301/js/zone.js:426:22" rel="nofollow">http://localhost:5301/js/zone.js:426:22</a></p>
    
    <p>Evaluating <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a>
        Error loading <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a> as "./app.component" from <a href="http://localhost:5301/app/boot.js" rel="nofollow">http://localhost:5301/app/boot.js</a></p>
  </blockquote>
  
  <p>And IE</p>
  
  <blockquote>
    <p>Error: SyntaxError: Syntaxfehler
         at ZoneDelegate.prototype.invoke (<a href="http://localhost:5301/js/zone.js:321:14" rel="nofollow">http://localhost:5301/js/zone.js:321:14</a>)
         at Zone.prototype.run (<a href="http://localhost:5301/js/zone.js:216:18" rel="nofollow">http://localhost:5301/js/zone.js:216:18</a>)
         at Anonymous function (<a href="http://localhost:5301/js/zone.js:571:18" rel="nofollow">http://localhost:5301/js/zone.js:571:18</a>)  Evaluating <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a>   Error loading
    <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a> as "./app.component" from
    <a href="http://localhost:5301/app/boot.js" rel="nofollow">http://localhost:5301/app/boot.js</a>    {
          [functions]: ,
          <strong>proto</strong>: { },
          description: "SyntaxError: Syntaxfehler
         at ZoneDelegate.prototype.invoke (<a href="http://localhost:5301/js/zone.js:321:14" rel="nofollow">http://localhost:5301/js/zone.js:321:14</a>)
         at Zone.prototype.run (<a href="http://localhost:5301/js/zone.js:216:18" rel="nofollow">http://localhost:5301/js/zone.js:216:18</a>)
         at Anonymous function (<a href="http://localhost:5301/js/zone.js:571:18" rel="nofollow">http://localhost:5301/js/zone.js:571:18</a>)  Evaluating <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a>   Error loading
    <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a> as "./app.component" from
    <a href="http://localhost:5301/app/boot.js" rel="nofollow">http://localhost:5301/app/boot.js</a>",
          message: "SyntaxError: Syntaxfehler
         at ZoneDelegate.prototype.invoke (<a href="http://localhost:5301/js/zone.js:321:14" rel="nofollow">http://localhost:5301/js/zone.js:321:14</a>)
         at Zone.prototype.run (<a href="http://localhost:5301/js/zone.js:216:18" rel="nofollow">http://localhost:5301/js/zone.js:216:18</a>)
         at Anonymous function (<a href="http://localhost:5301/js/zone.js:571:18" rel="nofollow">http://localhost:5301/js/zone.js:571:18</a>)  Evaluating <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a>   Error loading
    <a href="http://localhost:5301/app/app.component.js" rel="nofollow">http://localhost:5301/app/app.component.js</a> as "./app.component" from
    <a href="http://localhost:5301/app/boot.js" rel="nofollow">http://localhost:5301/app/boot.js</a>",
          name: "Error",
          originalErr: {
             [functions]: ,
             <strong>proto</strong>: {
                [functions]: ,
                <strong>proto</strong>: { },
                message: "",
                name: "SyntaxError"
             },
             description: "Syntaxfehler",
             message: "Syntaxfehler",
             name: "SyntaxError",
             number: -2146827286,
             stack: "SyntaxError: Syntaxfehler    at Q (<a href="http://localhost:5301/js/system.js:4:21818" rel="nofollow">http://localhost:5301/js/system.js:4:21818</a>)    at Anonymous function
    (<a href="http://localhost:5301/js/system.js:5:9152" rel="nofollow">http://localhost:5301/js/system.js:5:9152</a>)    at Anonymous function
    (<a href="http://localhost:5301/js/system.js:5:13662" rel="nofollow">http://localhost:5301/js/system.js:5:13662</a>)    at Anonymous function
    (<a href="http://localhost:5301/js/system.js:5:16880" rel="nofollow">http://localhost:5301/js/system.js:5:16880</a>)    at Anonymous function
    (<a href="http://localhost:5301/js/system.js:5:21223" rel="nofollow">http://localhost:5301/js/system.js:5:21223</a>)    at Anonymous function
    (<a href="http://localhost:5301/js/system.js:5:24189" rel="nofollow">http://localhost:5301/js/system.js:5:24189</a>)    at Anonymous function
    (<a href="http://localhost:5301/js/system.js:4:10269" rel="nofollow">http://localhost:5301/js/system.js:4:10269</a>)    at
    ZoneDelegate.prototype.invoke
    (<a href="http://localhost:5301/js/zone.js:321:14" rel="nofollow">http://localhost:5301/js/zone.js:321:14</a>)    at Zone.prototype.run
    (<a href="http://localhost:5301/js/zone.js:216:18" rel="nofollow">http://localhost:5301/js/zone.js:216:18</a>)    at Anonymous function
    (<a href="http://localhost:5301/js/zone.js:571:18" rel="nofollow">http://localhost:5301/js/zone.js:571:18</a>)"
          },
          stack: null    }</p>
  </blockquote>
  
  <p>It seems, that there is some JS Error in one of the loaded angualr files, ut even using Firebug my JS debugging skills are poor and i'm not getting the error. On the other side maybe there is missing some package for the other browsers.</p>
  
  <p>Here my config files</p>
  
  <p>gulpfile.js
  </p>
  
  <pre><code>/// &lt;binding BeforeBuild='default' /&gt;
  
  "use strict";
  
  var _ = require('lodash'),
      gulp = require('gulp'),
      uglify = require('gulp-uglify'),
      cssmin = require('gulp-cssmin'),
      rename = require('gulp-rename'),
      ts = require('gulp-typescript'),
      clean = require('gulp-clean');
  
  var angularJs = [
      './node_modules/@angular/**/*.js'
  ];
  
  var js = [
      './node_modules/es6-shim/es6-shim.js',
      './node_modules/reflect-metadata/Reflect.js',
      './node_modules/reflect-metadata/Reflect.js.map',
      './node_modules/bootstrap/dist/js/bootstrap.js',
      './node_modules/systemjs/dist/system.js',
      './node_modules/systemjs/dist/system.js.map',
      './node_modules/rxjs/bundles/Rx.js',
      './node_modules/typescript/lib/typescript.js',
      './node_modules/jquery/dist/jquery.js',
      './node_modules/zone.js/dist/**/*.js',
      './node_modules/core-js/client/shim.js'
  ];
  
  var rxAdditional = [
      './node_modules/rxjs/**/*.js'
  ];
  
  var css = [
      './node_modules/bootstrap/dist/css/bootstrap.css'
  ];
  
  var fonts = [
      './node_modules/bootstrap/dist/fonts/*.*'
  ];
  
  gulp.task('copy-js', function () {
      _.forEach(js, function (file, _) {
          gulp.src(file).pipe(gulp.dest('./wwwroot/js'))
      });
      _.forEach(angularJs, function (file, _) {
          gulp.src(file).pipe(gulp.dest('./wwwroot/js/@angular'))
      });
  
      _.forEach(rxAdditional, function(file, _) {
          gulp.src(file).pipe(gulp.dest('./wwwroot/js/rxjs'))
      });
  });
  
  gulp.task('copy-min-js', function () {
      _.forEach(js, function (file, _) {
          gulp.src(file).pipe(uglify()).pipe(rename({ extname: '.min.js' })).pipe(gulp.dest('./wwwroot/js'))
      });
      _.forEach(angularJs, function (file, _) {
          gulp.src(file).pipe(uglify()).pipe(rename({ extname: '.min.js' })).pipe(gulp.dest('./wwwroot/js/@angular'))
      });
  });
  
  gulp.task('copy-css', function () {
      _.forEach(css, function (file, _) {
          gulp.src(file).pipe(gulp.dest('./wwwroot/css'))
      });
      _.forEach(fonts, function (file, _) {
          gulp.src(file).pipe(gulp.dest('./wwwroot/fonts'))
      });
  });
  
  var tsProject = ts.createProject('tsconfig.json');
  
  gulp.task('ts', function (done) {
      //var tsResult = tsProject.src()
  
      gulp.src('./wwwroot/app/*.ts')
          .pipe(ts(tsProject), undefined, ts.reporter.fullReporter()).pipe(gulp.dest('./wwwroot/app'));
  });
  
  gulp.task('watch', ['watch.ts']);
  
  gulp.task('watch.ts', ['ts'], function () {
      return gulp.watch('./wwwroot/app/*.ts', ['ts']);
  });
  
  gulp.task('default', ['copy-js', 'copy-css', 'watch']);
  </code></pre>
  
  <p>tsconfig.json
  </p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es6",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false,
      "rootDir": "wwwroot/app",
      "outDir": "wwwroot/app",
      "listFiles": true,
      "noLib": false,
      "diagnostics": true
    },
    "exclude": [
      "node_modules",
      "typings"
    ]
  }
  </code></pre>
  
  <p>package.json
  </p>
  
  <pre><code>{
      "name": "my-angular-project",
      "private": true,
      "version": "0.0.1",
      "dependencies": {
          "@angular/core": "2.0.0-rc.1",
          "@angular/common": "2.0.0-rc.1",
          "@angular/compiler": "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/http": "2.0.0-rc.1",
  
          "@angular/router-deprecated": "2.0.0-rc.1",
          "@angular/upgrade": "2.0.0-rc.1",
  
          "bootstrap": "3.3.6",
          "systemjs": "0.19.29",
          "es6-promise": "^3.2.1",
          "es6-shim": "^0.35.1",
          "core-js": "^2.4.0",
          "reflect-metadata": "0.1.3",
          "rxjs": "5.0.0-beta.8",
          "zone.js": "^0.6.12",
          "jquery": "2.2.4",
          "angular2-in-memory-web-api": "0.0.11"
      },
      "devDependencies": {
          "typescript": "^1.8.10",
          "path": "^0.12.7",
          "gulp": "3.9.1",
          "gulp-clean": "^0.3.2",
          "gulp-debug": "^2.1.2",
          "gulp-inject": "^4.1.0",
          "gulp-sourcemaps": "^1.6.0",
          "gulp-tslint": "^5.0.0",
          "gulp-typescript": "^2.13.6",
          "gulp-rimraf": "^0.2.0",
          "typings": "^1.0.4",
          "gulp-tsc": "^1.1.5",
          "gulp-concat": "2.6.0",
          "gulp-cssmin": "0.1.7",
          "gulp-uglify": "1.5.3",
          "gulp-rename": "1.2.2",
          "rimraf": "2.5.2",
          "lodash": "4.13.1"
      },
    "scripts": {
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "postinstall": "typings install",
      "typings": "typings"
    }
  }
  </code></pre>
  
  <p>wwwroot/app/boot.ts
  </p>
  
  <pre><code>import {bootstrap}    from "@angular/platform-browser-dynamic";
  import {AppComponent} from "./app.component";
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p>wwwroot/app/app.component.ts
  </p>
  
  <pre><code>import {Component, OnInit} from "@angular/core";
  @Component({
      selector: "app",
      template: "&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;"
  })
  
  export class AppComponent implements OnInit {
      ngOnInit() {
          console.log("App init...");
      }
  }
  </code></pre>
  
  <p>_Layout.cshtml
  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;@ViewData["Title"]&lt;/title&gt;
      &lt;environment names="Development"&gt;
          &lt;!-- Css --&gt;
          &lt;link rel="stylesheet" asp-href-include="~/css/*.css"&gt;
          &lt;!-- Js --&gt;
          &lt;script src="~/js/Reflect.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/es6-shim.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/shim.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/jquery.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/system.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/rx.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/typescript.js"&gt;&lt;/script&gt;
          &lt;script src="~/js/zone.js"&gt;&lt;/script&gt;
          &lt;script src="~/systemjs.config.js"&gt;&lt;/script&gt;
  
      &lt;/environment&gt;
  
      &lt;!-- Configure SystemJS --&gt;
      &lt;script&gt;
  System.import('app/boot').catch(console.log.bind(console));
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          @RenderBody()
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Home/Index.cshtml
  </p>
  
  <pre><code>@{
      ViewData["Title"] = "Angular 2";
  }
  &lt;app class="container" style="display: block;"&gt;Loading...&lt;/app&gt;
  </code></pre>
  
  <p>systemjs.config.js
  </p>
  
  <pre><code>(function (global) {
  
      // map tells the System loader where to look for things
      var map = {
          'app': 'app', // 'dist',
          'rxjs': 'js/rxjs',
          'angular2-in-memory-web-api': 'js/angular2-in-memory-web-api',
          '@angular': 'js/@angular'
      };
  
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
          app: {
              main: 'boot.js',
              defaultExtension: 'js',
              format: 'register'
          },
          'rxjs': { defaultExtension: 'js' },
          'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }
      };
  
      var ngPackageNames = [
          'common',
          'compiler',
          'core',
          'http',
          'platform-browser',
          'platform-browser-dynamic',
          'router',
          'router-deprecated',
          'upgrade'
      ];
  
      // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
      function packIndex(pkgName) {
              packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
      }
  
      function packUmd(pkgName) {
          packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js'}
      }
  
      // Most environments should use UMD; some (Karma) need the individual index files
      var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
      // Add package entries for angular packages
      ngPackageNames.forEach(setPackageConfig);
  
  
      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>