Integrating firebase into standalone component

I need to clean it up but I’m using:

import { InjectionToken, NgModule } from '@angular/core';

import {
  FirebaseApp,
  initializeApp,
  provideFirebaseApp,
} from '@angular/fire/app';
import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
import {
  provideFirestore,
  getFirestore,
  connectFirestoreEmulator,
  initializeFirestore,
} from '@angular/fire/firestore';

export interface IFirebaseConfig {
  apiKey: string;
  authDomain: string;
  projectId: string;
  locationId: string;
  storageBucket: string;
  messagingSenderId: string;
  appId: string;
  measurementId: string;
}

export const FIREBASE_CONFIG = new InjectionToken<IFirebaseConfig>(
  'FIREBASE_CONFIG',
  {
    providedIn: 'any',
    factory: () => {
      throw new Error(`Provide FIREBASE_CONFIG`);
    },
  }
);
export const USE_EMULATORS = new InjectionToken<boolean>('USE_EMULATORS', {
  providedIn: 'any',
  factory: () => {
    throw new Error(`Provide USE_EMULATORS`);
  },
});

@NgModule({
  declarations: [],
  imports: [
    provideFirebaseApp((injector) => {
      const config = injector.get(FIREBASE_CONFIG);
      console.log('🔔 provideFirebaseApp');
      return initializeApp(config);
    }),
    provideAuth((injector) => {
      console.log('🔔 provideAuth');
      const app = injector.get(FirebaseApp);
      const auth = getAuth(app);
      if (injector.get(USE_EMULATORS)) {
        console.log('🔔 using auth emulator...');
        connectAuthEmulator(auth, 'http://localhost:9099');
      }
      return auth;
    }),
    provideFirestore((injector) => {
      console.log('🔔 provideFirestore');
      let firestore;
      if (injector.get(USE_EMULATORS)) {
        console.log(
          `🔔 using firestore emulator...${
            injector.get(FIREBASE_CONFIG).projectId
          }`
        );
        // bug: experimentalAutoDetectLongPolling not picked up via `getFirestore`
        const app = injector.get(FirebaseApp);
        firestore = initializeFirestore(app, {
          experimentalAutoDetectLongPolling: true,
        });
        connectFirestoreEmulator(firestore, 'localhost', 8080);
      } else {
        firestore = getFirestore();
      }
      return firestore;
    }),
  ],
})
export class FirebaseV7Module {}

And then including the following like a provideFirebase() in the providers of bootstrapApplication:

importProvidersFrom(
 FirebaseV7Module
)

Note you can also add providers to the router so not everything has to go onto the root provider but in this case it makes sense.

—-

In the new standalone world, instead of bootstrapping based off a module the application bootstraps based off a component in main.ts:

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
import { environment } from './environments/environment';

if (environment.production) {
    enableProdMode();
}

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

With appConfig collocated with the app component in source:

src/app/app.config.ts example from RealWorld Example App:

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: ApiConfiguration, useValue: { rootUrl: environment.apiUrl } },
    provideRouter(
      [
        {
          path: '',
          loadComponent: () => import('./layout/layout.component'),
          loadChildren: () => import('./layout/layout.routes'),
        },
      ],
      withHashLocation()
    ),
    provideHttpClient(withInterceptors([authInterceptor()])),
 ],
};