[7.2.0] Angular HMR: FirebaseError: Firestore has already been started and persistence can no longer be enabled

[hakimio]

Version info

Angular: 13.2

Firebase: 9.6

AngularFire: 7.2

How to reproduce these conditions

Steps to set up and reproduce

• serve Angular project with ng serve --hmr
• make some change in the application

Debug output

** Errors in the JavaScript console **

FirebaseError: Firestore has already been started and persistence can no longer be enabled. You can only enable persistence before calling any other methods on a Firestore object.

Expected behavior

No errors.

Actual behavior

Project fails to run with the above error.

Might be related to #2655

[DibyodyutiMondal]

I am getting an error in HMR mode too

I sign in with a user from the auth emulator, and then make changes in the code, and save.

Browser console error after making changes

FirebaseError: Firebase: Error (auth/emulator-config-failed).
    at createErrorInternal (index-7078a255.js:473:41)
    at _assert (index-7078a255.js:479:15)
    at connectAuthEmulator (index-7078a255.js:2569:5)
    at angular-fire.js:227:48
    at angular-fire.js:160:59
    at _ZoneDelegate.invoke (zone.js:372:1)
    at Zone.run (zone.js:134:1)
    at NgZone.runOutsideAngular (core.mjs:25486:1)
    at runOutsideAngular (angular-fire.js:160:35)
    at angular-fire.js:227:21

Error is being thrown from inside connectAuthEmulator. In my code, connectAuthEmulator is called inside of provideAuth(), but only if the app is in development mode. In turn, provideAuth is being used inside of AppModule imports array.

function connectAuthEmulator(auth, url, options) {
    const authInternal = _castAuth(auth);
    _assert(authInternal._canInitEmulator, authInternal, "emulator-config-failed" /* EMULATOR_CONFIG_FAILED */);
    _assert(/^https?:\/\//.test(url), authInternal, "invalid-emulator-scheme" /* INVALID_EMULATOR_SCHEME */);
    ...

[fatalcaron]

Same thing for me, I disable the Anuglar cli --hmr mode and it's working. Waiting for a fix or a workaround.

[DibyodyutiMondal]

I won't say I needed to disable hmr.

    const auth = getAuth(app);
    // check for dev mode, and if emulator config is set by previous hmr
    if (dev_mode && !auth.emulatorConfig) {
      connectAuthEmulator(auth, 'http://localhost:5001', { disableWarnings: true });
    }

[hakimio]

So, basically for Firestore error, similar workaround might work:

        provideFirestore(() => {
            const firestore = getFirestore();
            if (!firestore['_initialized']) {
                enableMultiTabIndexedDbPersistence(firestore);
            }

            return firestore;
        }),

and functions:

        provideFunctions(() => {
            const functions = getFunctions(getApp(), environment.firebase.region);
            if (!environment.production && !functions['emulatorOrigin']) {
                connectFunctionsEmulator(functions, environment.firebase.host, environment.firebase.port);
            }
            return functions;
        }),

[fatalcaron]

Thanks, this workaround work for me!