“Runtime Error Zone already loaded” in ionic 3

Question

I am developing my project in ionic 3 and Firebase Authentication on Firebase Version 4.13.1. I installed Angularfire2. I created a 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-opened 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:

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.<anonymous> (http://localhost:8100/build/vendor.js:117574:2)
    at Object.<anonymous> (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.<anonymous> (http://localhost:8100/build/vendor.js:117089:72)
    at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)

I thought I might be 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. so I put the script back.

I am stuck now, any help is greatly appreciated.

Answer 1

Just do

npm install @firebase/app@latest --save

and

npm install firebase angularfire2 --save

so everything is up to date. So you will probably get this error now again:

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

to fix it add the line "automaticDataCollectionEnabled: boolean;" to the node_modules\angularfire2\firebase.app.module.d.ts

export declare class FirebaseApp implements FBApp {
    name: string;
    automaticDataCollectionEnabled: boolean; // add this line
    options: {};
    auth: () => FirebaseAuth;
    database: () => FirebaseDatabase;
    messaging: () => FirebaseMessaging;
    storage: () => FirebaseStorage;
    delete: () => Promise;
    firestore: () => FirebaseFirestore;
}

So now it should be fixed. If not you have to try my second solution:

npm i -S @firebase/app

then go into your package.json file and update the version numbers of this two lines in your dependencies to the following:

"angularfire2": "5.0.0-rc.3",
"firebase": "4.6.0",

after the do a fresh install:

npm install

and then do a serve again and it should be working again:

ionic serve

Answer 2

This is the problem of new firebase update, here is a solution for this error

** Step: 1** Install the lower version of firebase using this command

npm install angularfire2@5.0.0-rc.4

** Step: 2**

npm install

Try.

Answer 3

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"

 npm install angularfire2@5.0.0-rc.4