CODEWITHSUNDEEP
javascriptangularangular7zonejs
redOctober13
redOctober13

Reputation: 3984

Angular 7: ng serve works, but console shows a Zone.js error and app won't load

Backstory: I needed to update my app from Angular 5.2.9 to 6 yesterday, and so I thought "why not go to 7 while I'm doing this." So of course that took all day, and required lots of changes to lots of files (mostly because of Rxjs), but in any case, by the end of the day I was able to do ng serve and have it compile with no errors!

But then when I went to localhost:4200 to run the app, it halted on "Loading..." with the following message in the DevTools console:

core.js:14016 Uncaught (in promise) Error: In this configuration Angular requires Zone.js
    at new NgZone (core.js:14016)
    at getNgZone (core.js:14701)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory (core.js:14599)
    at core.js:14643

I've tried to make sure all my packages are up to date. npm install gives some errors around fsevents, but zone is up-to-date.

So I'm at a loss of what to do now. I don't know what the error message is really trying to tell me, or if it's even legit. I did ng new and inspected the generated files, and there's no "zone.js setup" code in there, so I didn't miss something like that. I feel like I was so close to having this update work, but of course if the app won't run, it's no good! Googling for this error message didn't turn up anything useful (to me anyways).

Upvotes: 5

Views: 16940

Answers (2)

Lisa
Lisa

Reputation: 675

The same thing happened with my application as well, but in different context, i was adding the angular build files in a django app , the script tags included were not appropriate order , so while running 'python manage.py runserver', browser threw an error like "In this configuration Angular requires Zone.js" . so it got fixed after trying the below fixes:

first the order should be

  • runtime.js
  • polyfills.js
  • main.js

since angular generates es5 and es2015 build files, the script tags for es5 build files must contain 'nomodule defer' as attribute , while es2015 to include ' type="text/javascript"'. The below screenshot was from 'index.html' of my Django app, where i was adding the angular build files.enter image description here

Upvotes: 0

Manzer A
Manzer A

Reputation: 3816

update every dependency in package.json to latest

npm i -g npm-check-updates
ncu -u
npm install

The error will be gone, even if you get this error . Go to polyfill.ts and add or uncomment :-

/****************************************************************************
 * Zone JS is required by default for Angular itself. */
import 'zone.js/dist/zone';  // Included with Angular CLI.


/**********************************************************************

Upvotes: 6

Related Questions