Angularfire: Error: Zone already loaded.

Created on 5 May 2018 · 24Comments · Source: angular/angularfire

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)

Source

Celtiore

👍11

Most helpful comment

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

Arlette-Liliane on 10 May 2018

👍7 🎉1

All 24 comments

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 on 5 May 2018

Change this version in your package.json

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

fjoalland on 5 May 2018

👎2 👍1

Still happens 👎

ngocongcan on 5 May 2018

ghost on 5 May 2018

@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?

JiaLiPassion on 5 May 2018

thanks you @JiaLiPassion
wait and see now :)

Celtiore on 5 May 2018

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

Celtiore on 6 May 2018

@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);
  }
}

JiaLiPassion on 6 May 2018

👍2

Ok, i try later,
thanks you @JiaLiPassion

Celtiore on 6 May 2018

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 ?

Celtiore on 6 May 2018

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

JiaLiPassion on 6 May 2018

@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!

AnthonyNahas on 7 May 2018

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

JiaLiPassion on 7 May 2018

👍1

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)

Nilesh-TA on 9 May 2018

@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

JiaLiPassion on 9 May 2018

Thanks @JiaLiPassion.

I will try this.

Nilesh-TA on 9 May 2018

@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