Angular, Firebase - Can not initialize app with standalone components (nor with standard modules..)

Question

I've been struggling to get my angular project working with firebase today. I have an error:

main.ts:5 ERROR Error: Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).

Here are my deps:

"dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "firebase-tools": "^13.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

I tried to debug things so I put console.log() inside provideFirebaseApp() function, but it was NEVER CALLED - the console was empty (expect the error posted above)!

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

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

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes),
    importProvidersFrom(provideFirebaseApp(() => {
      console.log('Before initializing Firebase App');
      return initializeApp({
        some options... (copied from firebase- they are correct)
      })
    })), importProvidersFrom(provideFirestore(() => getFirestore()))]
};

After couple hours of fighting, I decided to create new test project and setup firebase right away, and that failed too. I created an angular project with ng new... then I installed dependencies npm i firebase-tools, ng add @angular/fire, followed the process of initializing the app and I tried to check if it is working by calling getFirestore() from OnInit() and got an error... I have even tried to generate new app without using standalone components, but old NgModules and the result is the same. The console.log inside provideFirebaseApp is never called. Maybe @angular/fire is broke?

I am sure that the app is bootstraping correctly but only without the providers coming from "importProvidersFrom([...]). All other providers (BrowserAnimationModule... etc) are working when provided in appConfig.

Answer 1

Alright, so finally I have a solution.

For older versions of Angular + @angular/fire I've been using getfirestore() method from "@angular/fire/firestore";

Now we have to use different approach with injecting the firestore to your component/service:

@Injectable({
  providedIn: 'root'
})
export class SomeService{
  private _firestore: Firestore = inject(Firestore); //first method

  constructor(private _firestore: Firestore) { //.. or second method
  }

  createDoc(docDetails: any) {
  ... some code, and finally: 
    const docRef= collection(this._firestore, path);
    addDoc(docRef, docDetails).then((docRef) => {
      console.log("Document successfully written with ID: ", docRef.id);
    }).catch((error) => {
      console.error("Error writing document: ", error);
    });
  }
}

Huge thanks to this answer https://stackoverflow.com/a/77587847/7322948