Angular firebase configuration for standalone component project (V17) using @angular/fire package and firebase emulators

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideFirebaseApp } from '@angular/fire/app';
import { provideAuth } from '@angular/fire/auth';
import { provideFirestore } from '@angular/fire/firestore';
import { provideStorage } from '@angular/fire/storage';
import { provideFunctions } from '@angular/fire/functions';
import { initializeApp, getApp } from 'firebase/app';
import { connectAuthEmulator, getAuth } from 'firebase/auth';
import {
  connectFirestoreEmulator,
  getFirestore,
  initializeFirestore,
  Firestore,
} from 'firebase/firestore';
import { connectStorageEmulator, getStorage } from 'firebase/storage';
import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';

import { routes } from './app.routes';
import { environment } from '../environments/environment';

const app = initializeApp(environment.firebase);

export const authFactory = () => {
  const auth = getAuth();
  if (environment.useEmulators) {
    connectAuthEmulator(auth, 'http://localhost:9099', {
      disableWarnings: true,
    });
  }
  return auth;
};

export const firestoreFactory = () => {
  let firestore: Firestore;

  if (environment.useEmulators) {
    firestore = initializeFirestore(app, {});
    connectFirestoreEmulator(firestore, 'localhost', 8080);
  } else {
    firestore = getFirestore();
  }
  return firestore;
};

export const storageFactory = () => {
  const storage = getStorage();
  if (environment.useEmulators) {
    connectStorageEmulator(storage, 'localhost', 9199);
  }
  return storage;
};

export const functionsFactory = () => {
  const functions = getFunctions(getApp());
  if (environment.useEmulators) {
    connectFunctionsEmulator(functions, 'localhost', 5001);
  }
  return functions;
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimationsAsync(),
    importProvidersFrom(provideFirebaseApp(() => app)),
    importProvidersFrom(provideFirestore(firestoreFactory)),
    importProvidersFrom(provideAuth(authFactory)),
    importProvidersFrom(provideStorage(storageFactory)),
    importProvidersFrom(provideFunctions(functionsFactory)),
  ],
};