Angular2 - long-stack-trace-zone.js:106 Uncaught ReferenceError: Zone is not defined答案

【问题标题】：Angular2 - long-stack-trace-zone.js:106 Uncaught ReferenceError: Zone is not definedAngular2 - long-stack-trace-zone.js:106 Uncaught ReferenceError: Zone is not defined
【发布时间】：2016-03-28 02:57:01
【问题描述】：

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

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

提前致谢。

///错误一

long-stack-trace-zone.js:106 Uncaught ReferenceError: Zone is not defined(anonymous function) @ long-stack-trace-zone.js:106(anonymous function) @ 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__@bootstrap e8f2c957aba446c2eaa1:500@vendor.ts:4__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:500 @ bootstrap e8f2c957aba446c2eaa1:93（匿名函数）@ bootstrap e8f2c957aba446c2eaa1:93 decorators.js:164 使用类 decoratorscheckReflect @ decorators.js:164(anonymous function) @ decorators.js:166__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(anonymous function) @ decorators.js:2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1 时需要未捕获的反射元数据 shim :50(匿名函数)@di.js:18__webpack_require__@bootstrap e8f2c957aba446c2eaa1:50(匿名函数)@browser_common.js:2__webpack_require__@bootstrap e8f2c957aba446c2eaa1:50(匿名函数)@browser.js:3__webpack_require__@bootstrap e8f2c957anonymous462c2eaa1:557anonymous462c ) @boot.ts:2__webpack_require__ @bootstrap e8f2c957aba446c2eaa1:50webpackJsonpCallback @bootstrap e8f2c957aba446c2eaa1:21(匿名函数) @app.bundle.js:1

//错误二

类 decoratorscheckReflect @ decorators.js:164(匿名函数) @ decorators.js:166__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(anonymous function) @ decorators.js:2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(anonymous function) @ di.js: 18__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(anonymous function) @ browser_common.js:2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(anonymous function) @ browser.js:3__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1:50(anonymous function) @ boot.ts:2__webpack_require__ @ bootstrap e8f2c957aba446c2eaa1: 50webpackJsonpCallback@bootstrap 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

// 填充物

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

【问题讨论】：

标签： typescript angular webpack

【解决方案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 相关的一些错误。

【讨论】：