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:

Firefox

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

Error: Zonehttp://localhost:5301/js/zone.js:323:20 Zonehttp://localhost:5301/js/zone.js:216:25 scheduleResolveOrReject/<@http://localhost:5301/js/zone.js:571:53 Zonehttp://localhost:5301/js/zone.js:356:24 Zonehttp://localhost:5301/js/zone.js:256:29 drainMicroTaskQueue@http://localhost:5301/js/zone.js:474:26 ZoneTask/this.invoke@http://localhost:5301/js/zone.js:426:22

Evaluating http://localhost:5301/app/app.component.js Error loading http://localhost:5301/app/app.component.js as "./app.component" from http://localhost:5301/app/boot.js

And IE

Error: SyntaxError: Syntaxfehler at ZoneDelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) at Zone.prototype.run (http://localhost:5301/js/zone.js:216:18) at Anonymous function (http://localhost:5301/js/zone.js:571:18) Evaluating http://localhost:5301/app/app.component.js Error loading http://localhost:5301/app/app.component.js as "./app.component" from http://localhost:5301/app/boot.js { [functions]: , proto: { }, description: "SyntaxError: Syntaxfehler at ZoneDelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) at Zone.prototype.run (http://localhost:5301/js/zone.js:216:18) at Anonymous function (http://localhost:5301/js/zone.js:571:18) Evaluating http://localhost:5301/app/app.component.js Error loading http://localhost:5301/app/app.component.js as "./app.component" from http://localhost:5301/app/boot.js", message: "SyntaxError: Syntaxfehler at ZoneDelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) at Zone.prototype.run (http://localhost:5301/js/zone.js:216:18) at Anonymous function (http://localhost:5301/js/zone.js:571:18) Evaluating http://localhost:5301/app/app.component.js Error loading http://localhost:5301/app/app.component.js as "./app.component" from http://localhost:5301/app/boot.js", name: "Error", originalErr: { [functions]: , proto: { [functions]: , proto: { }, message: "", name: "SyntaxError" }, description: "Syntaxfehler", message: "Syntaxfehler", name: "SyntaxError", number: -2146827286, stack: "SyntaxError: Syntaxfehler at Q (http://localhost:5301/js/system.js:4:21818) at Anonymous function (http://localhost:5301/js/system.js:5:9152) at Anonymous function (http://localhost:5301/js/system.js:5:13662) at Anonymous function (http://localhost:5301/js/system.js:5:16880) at Anonymous function (http://localhost:5301/js/system.js:5:21223) at Anonymous function (http://localhost:5301/js/system.js:5:24189) at Anonymous function (http://localhost:5301/js/system.js:4:10269) at ZoneDelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) at Zone.prototype.run (http://localhost:5301/js/zone.js:216:18) at Anonymous function (http://localhost:5301/js/zone.js:571:18)" }, stack: null }

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.

Here my config files

gulpfile.js

/// <binding BeforeBuild='default' />

"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']);

tsconfig.json

{
  "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"
  ]
}

package.json

{
    "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"
  }
}

wwwroot/app/boot.ts

import {bootstrap}    from "@angular/platform-browser-dynamic";
import {AppComponent} from "./app.component";

bootstrap(AppComponent);

wwwroot/app/app.component.ts

import {Component, OnInit} from "@angular/core";
@Component({
    selector: "app",
    template: "<h1>My First Angular 2 App</h1>"
})

export class AppComponent implements OnInit {
    ngOnInit() {
        console.log("App init...");
    }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <environment names="Development">
        <!-- Css -->
        <link rel="stylesheet" asp-href-include="~/css/*.css">
        <!-- Js -->
        <script src="~/js/Reflect.js"></script>
        <script src="~/js/es6-shim.js"></script>
        <script src="~/js/shim.js"></script>
        <script src="~/js/jquery.js"></script>
        <script src="~/js/bootstrap.js"></script>
        <script src="~/js/system.js"></script>
        <script src="~/js/rx.js"></script>
        <script src="~/js/typescript.js"></script>
        <script src="~/js/zone.js"></script>
        <script src="~/systemjs.config.js"></script>

    </environment>

    <!-- Configure SystemJS -->
    <script>
System.import('app/boot').catch(console.log.bind(console));
    </script>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Home/Index.cshtml

@{
    ViewData["Title"] = "Angular 2";
}
<app class="container" style="display: block;">Loading...</app>

systemjs.config.js

(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);

Related posts

Recent Viewed