1

There is an issue with Cypress and Firebase, based on some research I've done here it seems that Cypress intercepts all network requests and due to the nature of how firebase works it emits multiple values on the same request (It should be noted this only happens when using the emulators) Cypress code is not setup to handle this so it only emits the first value.

It seems that the accepted solution is to enable 'experimentalForceLongPolling' in the firebase settings, however I am unsure of how to do this in @angular/fire it says this has already been called with different settings.

I've tried placing it as a parameter to the initializeApp method that is returned in the provideFirebaseApp callback however nothing happens.

@angular/fire provides a method called 'initalizeFirestore' this takes an instance of the app and a parameter, which is an object that seems to allow you to set 'experimentalForceLongPolling' however when used it throws an error saying that 'initialize app has been called with different settings' makes sense as in the root module we provided firebase and Firestore. However you cannot call this method without an instance of the app so its a catch 22, you can't initialize the app because you need the injected database, and you can't call the method because initialize app has already been called.

How can I enable this setting through the library?

Thanks.

Raphael Castro
  • 907
  • 1
  • 8
  • 26

2 Answers2

2

I think this will resolve your issue as it has resolved mine. Add this into you app.module.ts file where you are configuring firebase and local emulator stuff.

providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: USE_FIRESTORE_SETTINGS,
      useValue: { experimentalForceLongPolling: true },
    },
    {
      provide: USE_AUTH_EMULATOR,
      useValue: environment.useEmulators
        ? ['http://localhost:9099']
        : undefined,
    },
Amad Hashmi
  • 36
  • 1
  • Now how do you do this with Firebase 9, where does it import from? – Jonathan Sep 06 '22 at 13:15
  • 1
    import { USE_EMULATOR as USE_FIRESTORE_EMULATOR, SETTINGS as USE_FIRESTORE_SETTINGS, } from '@angular/fire/compat/firestore'; If you are using angularfire then you can use this import – Amad Hashmi Sep 07 '22 at 16:06
  • The compat is going to load more than necessary. That would not be the recommended new way. – Jonathan Sep 07 '22 at 16:07
0

There is a exemple of my current configuration with type provider ( autocomplete )

(You have also the experimentalAutoDetectLongPolling option)

⚠️ SETTINGS_FIRESTORE is an alias of SETTINGS import 

import { SETTINGS as SETTINGS_FIRESTORE } from '@angular/fire/firestore';
import firebase from 'firebase/app'

@NgModule({
    declarations: [],
    imports: [
        // ....
        AngularFireModule.initializeApp(environment.firebase),
        // ....
    ],
    exports: [],
    providers: [
        {
            provide: SETTINGS_FIRESTORE,
            useValue: {
                experimentalforcelongpolling: true,
            } as firebase.firestore.Settings,
        },
    ],
})
export class AppModule {}

Working with AngularFire 6.1.5 and Angular 12

Aurélien
  • 81
  • 1
  • 5