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

Question

I'm using the Angular2 starter with webpackjs AMD. I'm not receiving any build errors at all, but when I browse (using npm server) I receive some errors:

Am I missing something in my build configuration? What else do I need to check in order for this to work?

Thank in advance.

///error one

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(anonymous function) @ bootstrap e8f2c957aba446c2eaa1:93 decorators.js:164 Uncaught reflect-metadata shim is required when using class decoratorscheckReflect @ decorators.js:164(anonymous function) @ 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(anonymous function) @ app.bundle.js:1

//error two

class decoratorscheckReflect @ decorators.js:164(anonymous function) @ 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(anonymous function) @ 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';

Eric Martinez Eric Martinez · Accepted Answer · 2016-03-28T03:12:27

You need to add zone itself to your polyfills. You can also remove es6-promise since es6-shim contains that one.

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

Make sure to update to beta.12 and zone.js 0.6.6 since these two fix a few bugs in their previous versions related to zone.

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

1 Answers