Auth Emulator not enabled until "connectAuthEmulator" is called

[rlacatus]

Version info

Angular: ~13.3.4 Firebase: 9.7.0 AngularFire: ^7.3.0

How to reproduce these conditions

Follow instructions here: LINK

Expected behavior

Connects to emulator at localhost:9099

Actual behavior

Connects to Firebase emulator

Issue is fixed by

When using connectAuthEmulator(getAuth(), "http://localhost:9099"); in an authService of some sort, the app connects to the emulator as expected.

Note: at this point, one can remove { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined }, from app.module.ts and it still works.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[brooksdra]

I've been having trouble with using the emulator for the last few weeks and received this bit of code from the firebase-tools group. I had to wrap the connectAuthEmulators with if (environment.useEmulators) and it works with and without the providers specified above.

imports: [
    provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:5005', { disableWarnings: true });
      }
      return auth;
    }),
    provideFirestore(() => {
      const firestore = getFirestore();
      if (environment.useEmulators) {
        connectFirestoreEmulator(firestore, 'localhost', 5006);
      }
      return firestore;
    }),
 ]

It would be nice to have a definitive guide.