Integrating firebase into standalone component

Question

I have a project which is a social app made with ionic angular and I want to include the firebase imports in it

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore())

The issue is that those imports should be in the app.module.ts file while the current component is a standalone component. I don't know where to put the imports as I should import:

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

Answer 1

Maybe you need to provide your firebase app on application bootstrapping like this:

bootstrapApplication(YourComponent, {
  providers: [
    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(environment.firebase))
    ),
    importProvidersFrom(
      provideFirestore(() => getFirestore())
    )
  ]
});

Answer 2

This seems like a pretty good solution. disclaimer: I'm new to standalone

main.ts

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

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    importProvidersFrom(IonicModule.forRoot()),
    provideRouter(routes),
    importProvidersFrom(provideFirebaseApp(() => initializeApp(environment.firebase))),
    importProvidersFrom(provideAnalytics(() => getAnalytics())),
    importProvidersFrom(provideAuth(() => getAuth())),
    importProvidersFrom(provideFirestore(() => getFirestore())),
    ScreenTrackingService,
    UserTrackingService,
  ],
});