32

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

jhhoff02
  • 1,179
  • 1
  • 17
  • 24

6 Answers6

38

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>
Koshimitsu
  • 1,144
  • 1
  • 12
  • 19
  • I think this answer should be the accepted one-- there's a comment in the angular environment file about zone.js that implies including it in prod is a performance hit: `/* * For easier debugging in development mode, you can import the following file * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. * * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ ` – Maus Feb 08 '19 at 18:04
  • *Or 'polifills.js' is missing and should be added in that exact order. This is a great answer and should be the accepted answer – Ruan Aug 15 '23 at 06:44
30

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);
MotKohn
  • 3,485
  • 1
  • 24
  • 41
15

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>
Evan Wieland
  • 1,445
  • 1
  • 20
  • 36
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • Thanks for your reply, I edited my answer. Do you think my `src` link is wrong, i.e. it should start `somethingElse/node_modules/...`? – jhhoff02 Sep 20 '16 at 11:58
  • 1
    You didn't show your HTML, directory structure, web server setup... But the problem is clearly that you're not loading it from the correct place. That's a separate problem, you have to configure your server to make those available and give it the right path. – Ruan Mendes Sep 20 '16 at 12:02
  • Yes I wasn't loading it at all I guess, I was missing this in `vendors.ts`: `import 'zone.js/dist/zone';` – jhhoff02 Sep 20 '16 at 12:11
  • 1
    Is this still the case? I thought that by having a polyfills.ts file one could avoid putting references to the node modules in the html. Additionally, when your webroot does not include the node modules, one is forced to use CDN's to reference these files. – crthompson Mar 16 '17 at 21:08
  • @paqogomez You can make your build include it if you don't want to use a CDN. Also, if you are using webpack, it can take care of including it too. I am using SystemJS – Ruan Mendes May 23 '17 at 16:07
  • I think @Koshimitsu's answer should be the accepted one-- there's a comment in the angular environment file about zone.js that implies including it in prod is a performance hit: /* * For easier debugging in development mode, you can import the following file * to ignore zone related error stack frames such as zone.run, zoneDelegate.invokeTask. * * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ – Maus Feb 08 '19 at 18:06
  • Where do I add this? When I added this to index.html, I still got the same error. – Anshuman Kumar Jun 28 '23 at 04:17
12

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

I was trying to include serviceWorkers.

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
1

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.

Sunny Days
  • 11
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 08 '22 at 06:46
0

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.

firecape
  • 726
  • 6
  • 10