Angular2 - long-stack-trace-zone.js：106 Uncaught ReferenceError：Zone is not defined

Question

我正在使用带有webpackjs AMD的Angular2启动器。我没有收到任何构建错误，但是当我浏览（使用npm服务器）时，我收到一些错误：

我是否在构建配置中缺少某些内容？我还需要检查什么才能使其工作？

提前致谢。

///错误一个

长栈跟踪zone.js：106未捕获的ReferenceError：区域没有被定义（匿名功能）@长栈跟踪zone.js：106（匿名功能）@ long-stack-trace-zone.js：165__webpack_require__ @ long-stack-trace-zone.js：20NEWLINE @long-stack-trace-zone.js：40232 @long-stack-trace-zone.js：43__webpack_require__ @自举e8f2c957aba446c2eaa1：500 @ vendor.ts：4__webpack_require__ @引导e8f2c957aba446c2eaa1：500 @引导e8f2c957aba446c2eaa1：93（匿名功能）@自举e8f2c957aba446c2eaa1：93个 decorators.js：164未捕获反映元数据垫片使用类时，需要decoratorscheckReflect @ decorators.js ：164（匿名函数）@ decorators.js：166__webpack_require__ @ bootstrap e （匿名函数）@ decorators.js：2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1：50（匿名函数）@ di.js：18__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1：50（匿名函数）@ browser_common.js：2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1：50（anonymous功能）@ browser.js：3__webpack_require__ @引导e8f2c957aba446c2eaa1：50（匿名功能）@ boot.ts：2__webpack_require__ @引导e8f2c957aba446c2eaa1：50webpackJsonpCallback @引导e8f2c957aba446c2eaa1：21（匿名功能）@ app.bundle.js：1

// error two

class decoratorscheckReflect @ decorators.js：164（anonymous function）@ decorators.js：166__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1：50（anonymous function）@ decorato rs.js：2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1：50（anonymous function）@ di.js：18__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1：50（匿名函数）@ browser_common.js：2__webpack_require__ @ bootstrap 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

您需要将自身添加zone您polyfills。您也可以删除es6-promise，因为es6-shim包含那一个。

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，因为这两个在他们以前的相关区版本修复了一些bug。