2

以下配置的基本问题是，它毫无例外地在 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://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

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

和 IE

错误：SyntaxError：ZoneDelegate.prototype.invoke 的 Syntaxfehler ( 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 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) 在 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/ 将 http://localhost:5301/app/app.component.js 加载为“./app.component”时出错 boot.js ”，消息：“SyntaxError：ZoneDelegate.prototype.invoke 的 Syntaxfehler ( 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 加载 http://localhost:5301/app/app.component.js作为“./app.component”时出错 /boot.js ", name: "Error", originalErr: { [functions]: , proto : { [functions]: , proto : { }, message: "", name: "SyntaxError" }, description: "Syntaxfehler" ，消息：“Syntaxfehler”，名称：“SyntaxError”，编号：-2146827286，堆栈：“SyntaxError: Syntaxfehler at Q ( http://localhost:5301/js/system.js:4:21818 ) 在匿名函数 (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 )在 ZoneDelegate.prototype.invoke ( http://localhost:5301/js/zone.js:321的匿名函数 ( http://localhost:5301/js/system.js:4:10269 ) :14 ) 在 Zone.prototype.run ( http://localhost:5301/js/zone.js:216:18 ) 在匿名函数 ( http://localhost:5301/js/zone.js:571:18)" }，堆栈：空 }

似乎，在加载的 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"
  ]
}

包.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>

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

0 回答 0