2

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);
southz rgw
  • 353
  • 4
  • 13
  • The Angular team is suggesting `core.js` instead of `es6-shim.js` since RC. See also this discussion https://github.com/angular/angular/issues/7914. Can you please try `core.js` and report back if it fixes the issue or produces another error? – Günter Zöchbauer Jun 07 '16 at 04:32
  • @GünterZöchbauer I've also read to use both like in my example. es6-shim is loaded first and then shim.js from core-js. Removing es6-shim does not change anything – southz rgw Jun 07 '16 at 13:36
  • That's not my area of expertise. Maybe someone else ... – Günter Zöchbauer Jun 07 '16 at 13:38

0 Answers0