How to enable experimentalForceLongPolling in @angular/fire

Question

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.

Answer 1

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,
    },