Solvedzone.js Runtime Error Zone already loaded

Hie guys, i am developing my project in ionic 3 and Firebase Authentication on Firebase Version 4.13.1. I installed Angularfire2 and do everything. i created registration form and successfully put the user details into the firebase database when testing my app using ionic-lab. However the issue came when i closed and re-open my project, i got the following error:

ERROR in ...node_modules/angularfire2/firebase.app.module.d.ts (10,22): Class 'FirebaseApp' incorrectly implements class 'FirebaseApp'. Did you mean to extend 'FirebaseApp' and inherit its members as a subclass? Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'.

i solved the error above by adding this line " automaticDataCollectionEnabled: boolean; " into this class export declare class FirebaseApp implements _FirebaseApp { }

Now i can't run my App because it is now giving me a new error which i pasted below:

Runtime Error
Zone Already loaded.

Stack

Error: Zone already loaded.
at http://localhost:8100/build/vendor.js:117594:15
at http://localhost:8100/build/vendor.js:118206:3
at FUNCTION (http://localhost:8100/build/vendor.js:117571:10)
at Object. (http://localhost:8100/build/vendor.js:117574:2)
at Object. (http://localhost:8100/build/vendor.js:120624:30)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.defineProperty.value (http://localhost:8100/build/vendor.js:69092:66)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object. (http://localhost:8100/build/vendor.js:117089:72)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)

I thought i am loading the module twice so i tried to remove <script src="build/vendor.js"></script> from index.html and got a new Runtime Error: webpack Jsonp is not defined.

I am stuck now, any help is greatly appreciated.

46 Answers

✔️Accepted Answer

I had the same issue after following the tutorial from the docs: https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md

I fixed it by installing version 5.0.0-rc.4 instead of 5.0.0-rc.7 because everything after 5.0.0-rc.4 seems to cause "Zone already loaded"

fix:
npm install angularfire2@5.0.0-rc.4

Other Answers:

When running npm install firebase angularfire2
I get the following installed:
"angularfire2": "^5.0.0-rc.7"
"firebase": "^5.0.2"
And then I get the error as described above zone.js already loaded. Thus, directing into node_modules/angularfire2 and removing import 'zone.js' line from angularfire2.js fixes the error.

Hope that helps you because I was struggling now a low with this incompatibility problem, it's really frustrating, developer should focus more on that before releasing new versions...

Related Issues:

49
zone.js Runtime Error Zone already loaded
I had the same issue after following the tutorial from the docs: https://github.com/angular/angularf...
17
zone.js IE11 - SecurityError zone.js (192,25)
@kevinkuszyk I think I may find the possible reason when run ng serve there will be websocket to con...
12
zone.js 'Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter' with Angular
You can work around this by changing line 135 in node_modules/zone.js/dist/long-stack-trace-zone.js ...
8
zone.js Error: Missing: SyncTestZoneSpec
@AbnerCrivellari the loading order is not correct you need to load proxy and sync-test before jasmin...