Firebase Question posted in
An extensive official documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    The following app config worked for me, but only after explicitly providing FIREBASE_OPTIONS

    
// app.config.ts

export const APP_CONFIG: ApplicationConfig = {
    providers: [
        provideRouter(APP_ROUTES),
        provideAnimations(),
        importProvidersFrom(
            provideFirebaseApp(() => initializeApp(environment.firebaseConfig))
        ),
        importProvidersFrom(provideStorage(() => getStorage())),
        importProvidersFrom(provideFirestore(() => getFirestore())),
        importProvidersFrom(provideAuth(() => getAuth())),
        importProvidersFrom(provideAnalytics(() => getAnalytics())),
        { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig },
        ScreenTrackingService,
        UserTrackingService,
    ],
};




    
// package.json

 "dependencies": {
        "@angular/animations": "^17.0.0",
        "@angular/cdk": "^17.0.1",
        "@angular/common": "^17.0.0",
        "@angular/compiler": "^17.0.0",
        "@angular/core": "^17.0.0",
        "@angular/fire": "^17.0.0",
        "@angular/forms": "^17.0.0",
        "@angular/material": "^17.0.1",
        "@angular/platform-browser": "^17.0.0",
        "@angular/platform-browser-dynamic": "^17.0.0",
        "@angular/router": "^17.0.0",
        "firebase": "^10.7.1"
      }

    Note that I do not use the return keyword when accessing provideFirebaseApp(). Hope this helps 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search