Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 786
redOctober13 Avatar asked Nov 15 '18 18:11

redOctober13


People also ask

Why ng serve command is not working?

To solve the error "ng: command not found", install the angular cli package globally by running npm install -g @angular/cli@latest and restart your terminal. If the command fails, run it with sudo and make sure the correct PATH is set in your system's environment variable.

Is Zone js required for Angular?

Angular uses Zone. js, Yes. But, Angular doesn't encapsulate the whole framework. It only leverages the execution context to detect changes and async events so it could trigger UI update.

What is NgZone used for?

There are still some third party APIs that Zone does not handle. In those cases, the NgZone service provides a run() method that allows you to execute a function inside the Angular zone. This function, and all asynchronous operations in that function, triggers change detection automatically at the correct time.

What is Zone Evergreen?

Evergreen, Colorado is in USDA Hardiness Zones 5a and 5b.


1 Answers

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.


/**********************************************************************
like image 115
Manzer Avatar answered Sep 20 '22 16:09

Manzer