Runtime Error Zone already loaded

[gmarimo]

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.

[JiaLiPassion]

please post a reproduce repo.

[rgbsuede]

Also experiencing this issue. I used ionic starts MyApp tabs, npm i -S angularfire2 firebase, and imported and initialized Firebase ... Zone already loaded.

[JiaLiPassion]

@joshbabb , could you provide a sample repository to reproduce?

[Celtiore]

hi @JiaLiPassion , i start a sample here too :

https://github.com/Celtiore/test-angularfire2

"angularfire2": "^5.0.0-rc.7",
"firebase": "^4.13.1"

thanks you, i'm not expert, but i suspect angularfire2 :)
breaks come after update angularfire2 5.0.0-rc.7

[MaartenGDev]

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

[Atif-Mahmud]

Same issue here. Same setup, same error, same fix.

[Celtiore]

@MaartenGDev , 5.0.0-rc.6 works fine here with firebase 4.13.1

[JiaLiPassion]

I think this is an angularfire2 issue, I will check it there.

[JiaLiPassion]

should be fixed in angular/angularfire#1599, I have tested with @Celtiore 's repo using my modified angularfire2.

[leonardo-mendonca]

Zone is being declared twice. A tip on changing the rc7 of angularfire2...

[MuazzOsman]

What firebase version is suitable with angularfire2@5.0.0rc.7 ? I've installed angularfire2@4.0.0-rc0
and firebase@4.13.1 already and my app is still not working. I need help ASAP thank you.

[JiaLiPassion]

@MuazzOsman , I think maybe issue is in angularfire2@5.0.0rc.7 itself, I am just confirming why they import zone.js again in this issue, angular/angularfire#1597, you can also try this angualrfire2.zip for test.
dist.zip

[Celtiore]

thanks you @JiaLiPassion

working fine

repo updated :

https://github.com/Celtiore/test-angularfire2

[LYTzeng]

@JiaLiPassion It works just fine.
Thank you very much!

[leonardo-mendonca]

Thank you @JiaLiPassion working perfectly

[AnthonyNahas]

I am facing the same problem as well after updating angularfire2 to version 5.0.0-rc.7! Downgrading was a good idea!

[charliemacdonald-incentro]

Downgrading angularfire2 to version 5.0.0-rc.4 worked for me perfectly!

[josejaner]

angularfire2 5.0.0-rc.4 run in the PC, but in the devices it does not work

[JiaLiPassion]

@josejaner , could you provide the detailed error information?

[manoela-reis]

I've downgrade angularfire2 to version 5.0.0-rc.4, but now i got another problem:
Runtime Error Uncaught(in promise): cordova_not_available

My config is:
@ionic/cli-utils : 1.19.1 ionic (Ionic CLI): 3.19.1 cordova(Cordova CLI) : 7.0.1 @IONIC/APP-SCRIPTS :3.0.1 Cordova Platforms : none IOnic Framework : ionic-angular 3.8.0 Node : v8.4.0 npm: 5.3.0 OS: Windows 8.1

I'm having this trouble with an app started with the template "tabs"
Thank you for all help in this problem.

[JiaLiPassion]

@manoela-reis , this is not a zone.js issue, you can check it here ,https://stackoverflow.com/questions/42840951/uncaught-in-promise-cordova-not-available-in-ionic-2
You can't use cordova in desktop env, you need to add code to detect environment.

[manoela-reis]

Ok but before i didn't have this error. I tried to fik the zone error and now I got this one.

[BennoStaub]

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

[artistic]

Had the same issue, downgrading worked for me thanks

[nyashaChitiyo]

1. install angularfire v4 anything above v4 will throw zone already loaded. I dont noe why they import when its already there
2. You can remove the import from your app.module.ts file.

[kavvisha]

@JiaLiPassion works like charm. Thanks you sir !
what is the version number ?

[JiaLiPassion]

@kavvisha , because this is not a zone.js issue, and the fix has been merged into angularfire2, so please wait for the next angularfire2 release.

[rahuljograna]

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.

[kavvisha]

@JiaLiPassion thank you ! ^_^

[kapilraghuwanshi]

downgrading not working for me. :(

[jcDu]

Hi @JiaLiPassion , in my case, I integrated angular into a jQuery project. Everything works well when I direct to angular page first time. And I got back to jQuery page, after this, when I want to direct to angular page again. I got "zone already loaded". Do you have any idea in this case?

[jcDu]

Obviously, zone has been loaded in the first time. In the second time, it tried to load again, so I got this issue. Is there a way to unload zone?

[JiaLiPassion]

@jcDu, currently there is no way to unload zone, I am working on unloadable zone.js, but it will take some time.
Zone already loaded was reported a lot recently, I will try to find a better solution when loading Zone.js multiple time.

[jcDu]

@JiaLiPassion , thanks for the reply. Waiting for your good news.

[SwCon]

I found a solution that worked for me: comment out the line in polyfills.ts

//import 'zone.js/dist/zone';

[pratikparikhatwork]

@JiaLiPassion any solution to this? When commenting out import as suggested by @SwCon it complains that angular requires it. @jcDu have you found any workarounds?

[JiaLiPassion]

I have created a PR to fix this one, it is still under review, if you want to test now, please update your package.json

"zone.js": "git://github.com/JiaLiPassion/zone.js#duplicate-dist"

[pratikparikhatwork]

@JiaLiPassion I get the following when i tried your PR. But it for sure solve the original problem, I am using Angular 6.0.3

Uncaught Error: Already loaded patch: ZoneAwarePromise
at Function.t.__load_patch (:1:1521)
at :1:11066
at Object.0TWp (:1:39603)
at p (:1:518)
at Object.hN/g (:1:55802)
at p (:1:518)
at Object.2 (:1:39707)
at p (:1:518)
at n (:1:387)
at e (:1:250)

[JiaLiPassion]

@pratikparikh-opentext , could you provide a reproduce repo?

[Germcguire87]

Im seeing the same error as @PratikParikh after using your PR @JiaLiPassion

I am using AOT and I was seeing the "Zone already loaded" error. After pointing zone js to your PR in my package.json i am now seeing

Uncaught Error: Already loaded patch: ZoneAwarePromise
at Function.Zone.__load_patch (VM21029 485:92)
at eval (VM21029 485:650)
at performance (VM21029 485:9)
at Object.eval (VM21029 485:12)
at eval (VM21029 485:3144)
at Object. (app.bundle.js:4009)
at webpack_require (app.bundle.js:709)
at fn (app.bundle.js:113)
at eval (VM20770 330:6)
at Object. (app.bundle.js:3029)
at webpack_require (app.bundle.js:709)
at fn (app.bundle.js:113)
at eval (VM20769 329:3)
at Object. (app.bundle.js:3022)
at webpack_require (app.bundle.js:709)
at fn (app.bundle.js:113)
at eval (client.ts?076c:1)
at Object. (app.bundle.js:8243)
at webpack_require (app.bundle.js:709)
at fn (app.bundle.js:113)
at Object. (app.bundle.js:8098)
at webpack_require (app.bundle.js:709)
at app.bundle.js:807
at app.bundle.js:810

[JiaLiPassion]

@Germcguire87, @pratikparikh-opentext, I will check it.

[pratikparikhatwork]

@JiaLiPassion thank you sir.

[JiaLiPassion]

I have made a new PR #1121 to fix the Already loaded patch: ZoneAwarePromise error, you can use the attached zip to test for now.
zone.js.zip

[Lokeai]

@BennoStaub this was the easiest way for me. Downgrading angularfire2 to rc4 introducing conflicts with other packages.

[cresjie]

Hi guys,
i know its a little bit late, but if you wanna use angularfire2@5.0.0-rc.7, you could temporarily use mine which has a fix for "zone already loaded", update your package.json to

"angularfire2": "git+https://github.com/cresjie/angularfire2v5.0.0-rc.7.4"