basic problem following configuration is, working in chrome without exceptions. ff , ie throwing exceptions zone.js. alle files seem adressed correctly (no html instead of js in 404 case), im still getting errors:
firefox
mutating [[prototype]] of object cause code run slowly; instead create object 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 "./app.component" http://localhost:5301/app/boot.js
and ie
error: syntaxerror: syntaxfehler @ zonedelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) @ zone.prototype.run (http://localhost:5301/js/zone.js:216:18) @ 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 "./app.component" http://localhost:5301/app/boot.js { [functions]: , proto: { }, description: "syntaxerror: syntaxfehler @ zonedelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) @ zone.prototype.run (http://localhost:5301/js/zone.js:216:18) @ 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 "./app.component" http://localhost:5301/app/boot.js", message: "syntaxerror: syntaxfehler @ zonedelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) @ zone.prototype.run (http://localhost:5301/js/zone.js:216:18) @ 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 "./app.component" 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 @ q (http://localhost:5301/js/system.js:4:21818) @ anonymous function (http://localhost:5301/js/system.js:5:9152) @ anonymous function (http://localhost:5301/js/system.js:5:13662) @ anonymous function (http://localhost:5301/js/system.js:5:16880) @ anonymous function (http://localhost:5301/js/system.js:5:21223) @ anonymous function (http://localhost:5301/js/system.js:5:24189) @ anonymous function (http://localhost:5301/js/system.js:4:10269) @ zonedelegate.prototype.invoke (http://localhost:5301/js/zone.js:321:14) @ zone.prototype.run (http://localhost:5301/js/zone.js:216:18) @ anonymous function (http://localhost:5301/js/zone.js:571:18)" }, stack: null }
it seems, there js error in 1 of loaded angualr files, ut using firebug js debugging skills poor , i'm not getting error. on other side maybe there missing package other browsers.
here 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} "@angular/platform-browser-dynamic"; import {appcomponent} "./app.component"; bootstrap(appcomponent); wwwroot/app/app.component.ts
import {component, oninit} "@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 system loader 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 system loader how 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 angular packages in 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'} } // environments should use umd; (karma) need individual index files var setpackageconfig = system.packagewithindex ? packindex : packumd; // add package entries angular packages ngpackagenames.foreach(setpackageconfig); var config = { map: map, packages: packages }; // filtersystemconfig - index.html's chance modify config before register it. if (global.filtersystemconfig) { global.filtersystemconfig(config); } system.config(config); })(this);
