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

Question

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:

<

Answer 1

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>

Answer 2

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

I was trying to include serviceWorkers.

Answer 3

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.

Answer 4

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>

Answer 5

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);