Error: Zone already loaded.

[Celtiore]

Hi,
1/ thanks you for your great job
2/ sorry for my english, i'm french :)
3/ i'm a beginner
4/ i'm not sure it's a bug
5/ i'm not sure it's the right place

this morning i'have updated "angularfire2": "^5.0.0-rc.6" to "angularfire2": "^5.0.0-rc.7"

6/ my working code with rc.6 does not work anymore
this.afsClient = new AngularFirestore(_firebaseAppFactory(configFirebase, 'firebaseClient'), false);
because with rc.7 :
(alias) new AngularFirestore(config: FirebaseOptions, name: string, shouldEnablePersistence: boolean, platformId: Object, zone: NgZone)

7/ i start a new blank project ( see github link below ) and now i have the zone.js error !

8/ can you explain me the correct syntax for platformId: Object, zone: NgZone

9/ thanks you

Version info

Angular:
"@angular/common": "5.2.10"
Firebase:
"firebase": "^4.13.1"
AngularFire:
"angularfire2": "^5.0.0-rc.7"

Other (e.g. Ionic/Cordova, Node, browser, operating system):
"ionic-angular": "3.9.2"

How to reproduce these conditions

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

Debug output

Uncaught Error: Zone already loaded.
at zone.js:32
at zone.js:644
at FUNCTION (zone.js:9)
at Object. (zone.js:12)
at Object. (zone.js:3060)
at webpack_require (bootstrap 5a89165deffa5ae45da5:54)
at Object.defineProperty.value (vendor.js:77357)
at webpack_require (bootstrap 5a89165deffa5ae45da5:54)
at Object. (vendor.js:125168)
at webpack_require (bootstrap 5a89165deffa5ae45da5:54)

[fjoalland]

Hello,

I have exactly the same issue than you. I think it's because of the version of angularfire2 but not sure, I will try something and if it works I will tell you.

[fjoalland]

Change this version in your package.json

    "angularfire2": "^5.0.0-rc.4",
    "firebase": "^4.6.2",

[ngocongcan]

Still happens 👎

[ghost]

+1

[JiaLiPassion]

@jamesdaniels , I think the issue is here, https://github.com/angular/angularfire2/blob/master/src/core/angularfire2.ts#L11,
why we need to import 'zone.js' here? I believe in browser or universal environment, zone.js should already be loaded.

Do we just need the Typing?
But I see in tsconfig.json,

    "../../node_modules/zone.js/dist/zone.js.d.ts"

has already been loaded, so I am not sure why we need to import zone.js, I delete the import and everything works fine, so this is an universal issue?

[Celtiore]

thanks you @JiaLiPassion
wait and see now :)

[Celtiore]

@JiaLiPassion , i try to modify nodes_modules/angularfire2/angularfire2.js and nodes_modules/angularifre2.d.ts in my project, but i have same error ?

[JiaLiPassion]

@Celtiore, you can try the attached zip file
dist.zip

, and I also updated your project, src/providers/af/af.ts.
you need to pass ngZone to create a new AngularFirestore.

import {Injectable, NgZone} from '@angular/core';
import {AngularFirestore} from 'angularfire2/firestore';
import {firebaseConfig} from '../../app/app.module';

@Injectable()
export class AfProvider {
  canUexplainMe2: any;

  afsClient: AngularFirestore;

  constructor(private ngZone: NgZone) {
    console.log('Hello AfProvider Provider');
  }
  createAFS() {
    this.afsClient = new AngularFirestore(
        firebaseConfig, 'firebaseUsers', false, 'can you explain me',
        this.ngZone);
  }
}

[Celtiore]

Ok, i try later,
thanks you @JiaLiPassion

[Celtiore]

thanks you so much, can't wait later to try :) :) :)

working fine

repo updated :

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

Can we close this issue ?

[JiaLiPassion]

@Celtiore , thank you for confirm, I am not sure why import 'zone.js'; is there , so we can close it when we confirm the reason with the angularfire2 team.

[AnthonyNahas]

@JiaLiPassion I am not sure why import 'zone.js' --> I think that fixed the problem when angularfire is running outside angular... like in nodejs for server side rendering...
Anyway, I am getting the same error after updating angularfire2 to version 5.0.0-rc.7!
Downgrading is in progress 📦 ... This helps!

[JiaLiPassion]

@AnthonyNahas , in nodejs or server side rendering, zone-node.js is already been loaded.
So I think it is not necessary to import it again.

[Nilesh-TA]

Hi @JiaLiPassion

I am facing same issue "Zone already loaded". Can you please help me.

See below info

Version info

Angular:
"@angular/common": "5.2.10"
Firebase:
"firebase": "^5.0.1"
AngularFire:
"angularfire2": "^5.0.0-rc.7"

Other (e.g. Ionic/Cordova, Node, browser, operating system):
"ionic-angular": "3.9.2"

Debug output

Error: Zone already loaded.
at http://localhost:8100/build/vendor.js:117673:15
at http://localhost:8100/build/vendor.js:118285:3
at FUNCTION (http://localhost:8100/build/vendor.js:117650:10)
at Object. (http://localhost:8100/build/vendor.js:117653:2)
at Object. (http://localhost:8100/build/vendor.js:120703:30)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.defineProperty.value (http://localhost:8100/build/vendor.js:69158:66)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object. (http://localhost:8100/build/vendor.js:117168:72)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)

[JiaLiPassion]

@Nilesh-TA , for now, you can downgrade to 5.0.0-rc.4 or use this zip https://github.com/angular/angularfire2/files/1977627/dist.zip for test

[Nilesh-TA]

Thanks @JiaLiPassion.

I will try this.

[nikjeni]

@JiaLiPassion
Still it is not working. Even i have the same version as @Nilesh-TA mentioned in his comment. But still it is giving same error "zone already loaded".
Please help me to resolve this

[nikjeni]

@JiaLiPassion well done. i fixed it with zip which you uploaded.
Thank you

[Celtiore]

thanks you @JiaLiPassion @jamesdaniels

https://github.com/angular/angularfire2/pull/1599/files/aefedc2af5026e00b6344ff3d9249ecf7dbf6c7b

[Arlette-Liliane]

i hav same problem,
i fixed with : npm update angularfire2
New version in package.json : "angularfire2": "^5.0.0-rc.5-next"

[csotomon]

this is solved in 5.0.0-rc.5-next, but i had to downgrade firebase to firebase@^4.13.1

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

[takahser]

Didn't work for me!
I tried the following constellations:

• "firebase": "4.13.1" and "angularfire2": "5.0.0-rc.5-next"
• "angularfire2": "5.0.0-rc.11" and "firebase": "^5.0.2"
• "angularfire2": "5.0.0-rc.11" and "firebase": "5.3.1"

I'm using Angular 6.

Any suggestions?

[DanyalKhawaja]

Solution to zone issue:
http://olengski.com/subpages/angular5/angular5.html