Integrating firebase into standalone component

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';

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

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

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,
  ],
});

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()])),
],
};