How can I ensure Firebase is initialized before making Firestore API calls in Angular?

Below is an explanation on how to ensure that your Firebase instance is ready before making calls to Firestore.

Explanation

When you call the Firestore functions (like getDocs) too early, it may run before AngularFire has finished initializing the default Firebase app. Even though you set up AngularFireModule.initializeApp in your module imports, the initialization process can be asynchronous. To solve this, you can use one of the following strategies:

1. Inject AngularFire’s FirebaseApp or Firestore Service
   Instead of calling the standalone modular functions (e.g. getFirestore), inject the Firestore service provided by AngularFire. This helps Angular’s dependency injection system ensure that Firebase is initialized before it’s used. For example:

   TYPESCRIPTCopied
   import { Injectable } from '@angular/core';
   import { Firestore, collectionData, collection } from '@angular/fire/firestore';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root',
   })
   export class ComputerService {
     constructor(private firestore: Firestore) {}
   
     getComputers(): Observable<any[]> {
       const colRef = collection(this.firestore, 'computers');
       return collectionData(colRef, { idField: 'id' });
     }
   }

   In this approach the injected Firestore instance will be ready once AngularFireModule.initializeApp has completed.

2. Use an APP_INITIALIZER Provider

   If you need to perform an asynchronous initialization (or make sure Firebase is fully ready) before your application components run, you can use Angular’s APP_INITIALIZER token. This delays the application bootstrap until your initialization promise resolves.

   For example, you might create a simple initializer that waits for the Firebase app to be injected:

   TYPESCRIPTCopied
   // app.module.ts
   import { NgModule, APP_INITIALIZER } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AngularFireModule } from '@angular/fire/compat';
   import { AngularFireAuthModule } from '@angular/fire/compat/auth';
   import { environment } from '../environments/environment';
   import { AppComponent } from './app.component';
   import { FirebaseApp } from '@angular/fire/app';
   
   export function initializeFirebaseApp(firebaseApp: FirebaseApp) {
     return () => firebaseApp; // Simple initialization check (can be extended)
   }
   
   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       AngularFireModule.initializeApp(environment.firebaseConfig),
       AngularFireAuthModule,
       // Other modules...
     ],
     providers: [
       {
         provide: APP_INITIALIZER,
         useFactory: initializeFirebaseApp,
         deps: [FirebaseApp],
         multi: true,
       }
     ],
     bootstrap: [AppComponent],
   })
   export class AppModule {}

   With this provider, Angular will defer the application bootstrap until the promise returned by the factory (or in this case the simple call) is resolved, ensuring the Firebase app is created.

Summary

• Best Practice in AngularFire: Inject AngularFire’s services (e.g. Firestore) rather than using the standalone modular functions. Angular’s dependency injection will guarantee that the Firebase instance is properly initialized.
• APP_INITIALIZER: If you prefer to block component initialization until Firebase is ready (or need to do more complex bootstrapping) use Angular’s APP_INITIALIZER.

Implementing one of these strategies will ensure that your Firebase instance is initialized before your API calls run, avoiding the error “No Firebase App '[DEFAULT]' has been created…”.