Angular2 - long-stack-trace-zone.js：106 Uncaught ReferenceError：ゾーンが定義されていません

Question

私はwebpackjs AMDでAngular2スターターを使用しています。私は全くビルドエラーを受け取っていませんが、（npmサーバーを使用して）ブラウズすると、いくつかのエラーが表示されます。

ビルド構成に何か不足していますか？これを動作させるために何をチェックする必要がありますか？

ありがとうございます。

///エラー1

長いスタックトレースzone.js：106キャッチされないにReferenceError：ゾーンが定義されていません（匿名関数）@長いスタックトレースzone.js：106（匿名関数@ long-stack-trace-zone.js：206__webpack_require__ @ long-stack-trace-zone.js：20NEWLINE @ long-stack-trace-zone.js：40232 @ long-stack-trace-zone.js：43__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：vendor.ts @ 500：4__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：93（匿名関数）、ブートストラップe8f2c957aba446c2eaa1 @：93 decorators.js：ブートストラップe8f2c957aba446c2eaa1 @ 500クラスを使用するときに164キャッチされない反映し、メタデータのシムが必要とされてdecoratorscheckReflect @ decorators.js ：164（無名関数）@ decorators.js：166__webpack_require__ @ bootstrap e 8f2c957aba446c2eaa1：50（匿名関数）@ decorators.js：50（匿名関数）di.js @：2__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ18__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：50（匿名関数）browser_common.js @：50（匿名：@ 2__webpack_require__ e8f2c957aba446c2eaa1ブートストラップbrowser.js @関数）：boot.ts @ 50（匿名関数）：3__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ2__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：50webpackJsonpCallback @ e8f2c957aba446c2eaa1ブートストラップ：app.bundle.js @ 21（匿名関数）：1

//エラー2

クラスdecoratorscheckReflect @ decorators.js：164（匿名関数）@ decorators.js：166__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1：50（匿名関数）@ decorato rs.js：2__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：50（匿名関数）di.js @：18__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：50（匿名関数）browser_common.js @：2__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：50（匿名関数）browser.js @：3__webpack_require__ @ブートストラップe8f2c957aba446c2eaa1：50（匿名関数）boot.ts @：2__webpack_require__ @ e8f2c957aba446c2eaa1ブートストラップ：50webpackJsonpCallback @ e8f2c957aba446c2eaa1ブートストラップ：21（匿名関数）app.bundle.js @：1

//package.json

{ 
     "name": "angular2", 
     "version": "1.0.0", 
     "description": "Angular 2", 
     "scripts": { 
     "build": "webpack", 
     "start": "webpack-dev-server" 
     }, 
    "license": "ISC", 
    "devDependencies": { 
     "ts-loader": "^0.7.2", 
     "tsd": "^0.6.5", 
     "typescript": "^1.7.5", 
     "webpack": "^1.12.11", 
     "webpack-dev-server": "^1.14.1" 
    }, 
    "dependencies": { 
    "angular2": "^2.0.0-beta.11", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.13", 
    "reflect-metadata": "^0.1.2", 
    "rxjs": "^5.0.0-beta.0", 
    "zone.js": "^0.6.5" 
    } 
} 

//ts.config

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    }, 
    "exclude": [ 
    "node_modules" 
    ], 
    "filesGlob": [ 
    "typings/**/*.ts", 
    "app/**/*.ts" 
    ], 
    "files": [ 
    "typings/angular2/angular2.d.ts", 
    "typings/tsd.d.ts", 
    "app/app.component.ts", 
    "app/boot.ts", 
    "app/vendor.ts" 
    ], 

    "compileOnSave": false, 
    "buildOnSave": false, 
    "atom": { 
    "rewriteTsconfig": true 
    } 
} 

//vendor.ts

// Polyfillsは

import 'es6-shim'; 
import 'es6-promise'; 
import 'zone.js/dist/long-stack-trace-zone'; 
import 'reflect-metadata'; 

Answer 1

あなたのpolyfillsにzone自体を追加する必要があります。 es6-shimにはその番号が含まれているため、es6-promiseを削除することもできます。

import 'es6-shim'; 
import 'zone.js/dist/zone'; // You are missing this one 
import 'zone.js/dist/long-stack-trace-zone'; 
import 'reflect-metadata'; 

これらの二つのゾーンに関連する彼らの以前のバージョンではいくつかのバグを修正するのでbeta.12とzone.js 0.6.6にアップデートすることを確認します。