CODEWITHSUNDEEP
angulartypescriptpolyfillszonejs
jhhoff02
jhhoff02

Reputation: 1210

Angular2 Final Release - "Error: Angular requires Zone.js prolyfill"

I have upgraded from RC4 to the Final release of Angular2. When I run npm start, the app is stuck on 'Loading...' the only error I get is about Zone.js:

enter image description here

Basically, typeof Zone is undefined:

enter image description here

Here is my package.json:

"engines": {
"node": ">= 4.2.1",
"npm": "3.10.7"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@angular/router": "3.0.0",
"@salesforce-ux/design-system": "^2.0.3",
"angular2-busy": "^0.3.2-rc.6",
"chart.js": "2.1.0",
"core-js": "^2.4.0",
"d3": "^4.2.3",
"lodash": "^4.14.0",
"moment": "^2.14.1",
"ng2-bootstrap": "^1.1.4",
"ng2-charts": "^1.1.0",
"ng2-datepicker": "^1.0.6",
"ng2-pagination": "^0.4.1",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.12",
"typescript": "2.1.0-dev.20160916",
"zone.js": "0.6.21"
},
"devDependencies": {
"@angular/compiler-cli": "^0.6.1",
"@types/core-js": "^0.9.28",
"@types/hammerjs": "^2.0.28",
"@types/jasmine": "^2.2.29",
"@types/lodash": "^4.14.34",
"@types/node": "^6.0.38",
"@types/source-map": "^0.1.26",
"@types/webpack": "^1.12.29",
"angular2-hmr": "~0.6.0",
"awesome-typescript-loader": "~0.17.0",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.15.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"jasmine": "^2.4.1",
"json-loader": "^0.5.4",
"object-assign": "4.0.1",
"phantomjs-polyfill": "0.0.1",
"raw-loader": "0.5.1",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.1",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typescript": "2.0.0",
"url-loader": "^0.5.7",
"wallaby-webpack": "0.0.11",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.12.0"
  }
}

I've tried zone.js ^0.6.23 and these package versions as well. Any ideas? I can edit and add more information.

Edit: The only clue I found in CHANGELOG was this from RC 6:

testing config: due to zone.js peer-dependency upgrade, the order in which various zone specs are loaded has changed. Please see this example Karma config.

Edit: I tried importing Zone.js in script tags in index.html and I get these errors even though I have the packages in node_modules: enter image description here

Upvotes: 35

Views: 63846

Answers (6)

Sunny Days
Sunny Days

Reputation: 11

If you are using MSAL you can get this error if you do not have the <app-redirect></app-redirect> tags in your index.html.

The bot asked for more context but this is a specific use case for those people who might use Microsoft Authentication Library. It needs app-redirect tag in index.html to function properly per the documentation and the error you can get if you forget the app-redirect tag matches the one in the original post but is deceptive to your particular issue.

Upvotes: 1

firecape
firecape

Reputation: 726

This error can also occur when reverting a commit or changing a lot of files and not restarting the development server. Just stop the angular cli server, and try running ng serve again. This solution worked for me, and it wasn't obvious to restart the angular development server at first.

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

Add import 'zone.js' on top of the file main.ts.

I was trying to include serviceWorkers.

Upvotes: 13

Chandra
Chandra

Reputation: 1184

This can happen if the order of scripts is incorrect.

<!-- ERROR: Angular requires Zone.js polyfill -->
<script src="main.js"></script>
<script src="runtime.js"></script>
<script src="polyfills.js"></script>

Correct order:

<!-- Success -->
<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="main.js"></script>

Upvotes: 41

MotKohn
MotKohn

Reputation: 3965

If adding node_module to your HTML is a problem, all you need is to manually import zone.js before bootstrapping.

import 'zone.js';
...
platformBrowserDynamic().bootstrapModule(AppModule);

Upvotes: 33

Ruan Mendes
Ruan Mendes

Reputation: 92284

You need to include Zone as a script tag before you include angular, it doesn't get loaded as a module. See https://angular.io/guide/quickstart

<!-- 1. Load libraries -->

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

Upvotes: 16

Related Questions