Angular2 - long-stack-trace-zone.js:106未捕获的ReferenceError:未定义区域

Question

我正在使用带有webpackjs AMD的Angular2启动器.我根本没有收到任何构建错误,但是当我浏览(使用npm服务器)时,我收到一些错误:

我在构建配置中遗漏了什么吗？我需要检查什么才能使其正常工作？

预先感谢.

///错误一

长栈跟踪zone.js:106未捕获的ReferenceError:区域没有被定义(匿名功能)@长栈跟踪zone.js:106(匿名功能)@长栈跟踪zone.js:165__webpack_require__ @长重新建立了新跟踪zone.js:20NEWLINE @长栈跟踪zone.js:40232 @长栈跟踪zone.js:43__webpack_require__ @引导e8f2c957aba446c2eaa1:500 @ vendor.ts:4__webpack_require__ @引导e8f2c957aba446c2eaa1 :500 @引导e8f2c957aba446c2eaa1:93(匿名功能)@自举e8f2c957aba446c2eaa1:93个decorators.js:164(匿名功能)@ decorators.js::164未捕获反映元数据垫片是使用类decoratorscheckReflect @ decorators.js当需要166__webpack_require__ @自举e8f2c957aba446c2eaa1:50(匿名函数)@ decorators.js:2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(匿名函数)@ di.js:18__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(匿名函数)@ browser_common.js:2__webpack_require__ @ bootstrap e8f2c957aba446c2ea a1:50(匿名函数)@ browser.js:3__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(匿名函数)@ boot.ts:2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50webpackJsonpCallback @ bootstrap e8f2c957aba446c2eaa1:21(匿名函数)@ app.bundle.js:1

//错误二

class decoratorscheckReflect @ decorators.js:164(匿名函数)@ decorators.js:166__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(匿名函数)@ decorators.js:2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(匿名函数)@ di.js:18__webpack_require__ @ bootstrap 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

您需要将zone自己添加到您的polyfill.你也可以删除,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,因为这两个修复了他们之前版本中与zone相关的一些错误.