Question

以下配置的基本问题是，它在Chrome中无异常。但FF和IE正在从zone.js抛出异常。 Alle文件似乎正确处理（在404情况下没有html而不是js），但我仍然得到这个错误：

火狐

改变对象的[[Prototype]]会导致代码运行得非常慢;而是使用Object.create es6-shim.js：1541：11
创建具有正确的初始[[Prototype]]值的对象
错误：Zonehttp：// localhost：5301 / js / zone.js：323：20       Zonehttp：//本地主机：5301 / JS / zone.js：216：25       scheduleResolveOrReject /＆LT; @ http://localhost:5301/js/zone.js:571:53       Zonehttp：//本地主机：5301 / JS / zone.js：356：24       Zonehttp：//本地主机：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

评估http://localhost:5301/app/app.component.js       从http://localhost:5301/app/app.component.js
加载http://localhost:5301/app/boot.js为“./app.component”时出错

和IE

错误：SyntaxError：Syntaxfehler 在ZoneDelegate.prototype.invoke（http://localhost:5301/js/zone.js:321:14）在Zone.prototype.run（http://localhost:5301/js/zone.js:216:18）在匿名函数（http://localhost:5301/js/zone.js:571:18）评估http://localhost:5301/app/app.component.js加载错误 http://localhost:5301/app/app.component.js为“./app.component” http://localhost:5301/app/boot.js { [功能]：， 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）在匿名函数（http://localhost:5301/js/zone.js:571:18）评估http://localhost:5301/app/app.component.js加载错误 http://localhost:5301/app/app.component.js为“./app.component” http://localhost:5301/app/boot.js”，消息：“SyntaxError：Syntaxfehler 在ZoneDelegate.prototype.invoke（http://localhost:5301/js/zone.js:321:14）在Zone.prototype.run（http://localhost:5301/js/zone.js:216:18）在匿名函数（http://localhost:5301/js/zone.js:571:18）评估http://localhost:5301/app/app.component.js加载错误 http://localhost:5301/app/app.component.js为“./app.component” http://localhost:5301/app/boot.js”，名称：“错误”， originalErr：{ [功能]：， proto ：{ [功能]：， proto ：{}，信息： ””，名称：“SyntaxError” }，描述：“Syntaxfehler”，消息：“Syntaxfehler”， name：“SyntaxError”，号码：-2146827286， stack：“Anax函数的Q（http://localhost:5301/js/system.js:4:21818）处的SyntaxError：Syntaxfehler” （http://localhost:5301/js/system.js:5:9152）匿名函数（http://localhost:5301/js/system.js:5:13662）匿名函数（http://localhost:5301/js/system.js:5:16880）匿名函数（http://localhost:5301/js/system.js:5:21223）匿名函数（http://localhost:5301/js/system.js:5:24189）匿名函数（http://localhost:5301/js/system.js:4:10269）at ZoneDelegate.prototype.invoke （http://localhost:5301/js/zone.js:321:14）在Zone.prototype.run （http://localhost:5301/js/zone.js:216:18）匿名函数（http://localhost:5301/js/zone.js:571:18）” }， stack：null}

看来，在其中一个加载的angualr文件中有一些JS错误，即使使用Firebug，我的JS调试技能也很差，而且我没有收到错误。另一方面，可能缺少其他浏览器的一些软件包。

这是我的配置文件

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的/应用/ boot.ts

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

bootstrap(AppComponent);

wwwroot的/应用/ 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>

主页/ 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);

angular2与ASP.NET 5在Chrome中工作但在Firefox和IE中不起作用（zone.js中的错误）

0 个答案: