2

次の構成の基本的な問題は、例外なく Chrome で動作することです。しかし、FF と IE は zone.js から例外をスローしています。すべてのファイルは正しくアドレス指定されているように見えます (404 ケースでは js の代わりに html はありません) が、まだこのエラーが発生しています:

ファイアフォックス

オブジェクトの [[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/から "./app.component" としてhttp://localhost : 5301/app/app.component.js を ロード中にエラーが発生しましたアプリ/boot.js

そしてIE

エラー: SyntaxError: ZoneDelegate.prototype.invoke ( http://localhost:5301/js/zone.js:321:14 ) での Syntaxfehler 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 ) at Anonymous function ( http://localhost:5301/js/zone.js:571:18 ) httpの評価://localhost:5301/app/app.component.js http://localhost:5301/app/app.component.jsをhttp://localhost:5301/app/から "./app.component" として ロード中に エラー が発生しましたboot.js "、メッセージ: "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 ) 匿名関数 ( http://localhost:5301/js/zone.js:571:18 ) で評価中http://localhost:5301/app/app.component.js http://localhost:5301/appから "./app.component" として http ://localhost:5301/app/app.component.js を ロード中にエラー が発生しました/boot.js ", 名前: "エラー", originalErr: { [関数]: , プロト: { [関数]: , プロト: { }, メッセージ: "", 名前: "SyntaxError" }, 説明: "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 ) 匿名関数 ( 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 ) で匿名関数 ( http://localhost:5301/js/zone.js:571:18 ))" }、スタック: null }

読み込まれたangualrファイルの1つに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