Angular 17 and AngularFire 17 Error when trying to use service

Question

I have been stuck with this issue for a while now as I'm not familiar with Angular 17 new standalone default without app.module.ts

This is my app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideAnimations(), 
   importProvidersFrom(provideFirebaseApp(() => initializeApp(environment.firebase))),  
   importProvidersFrom(provideAuth(() => getAuth())), 
   importProvidersFrom(provideAnalytics(() => getAnalytics())), 
   ScreenTrackingService, UserTrackingService, 
   importProvidersFrom(provideFirestore(() => getFirestore())), 
   importProvidersFrom(provideStorage(() => getStorage())),
   importProvidersFrom(AngularFireModule),
   importProvidersFrom(AngularFireAuthModule),
   importProvidersFrom(AngularFirestoreModule),
   importProvidersFrom(AngularFireStorageModule),
   importProvidersFrom(AngularFireDatabaseModule),
  ]
};

This is my auth.service.ts

import { Injectable, NgZone, isDevMode } from '@angular/core';
import { User } from '../services/user';
import * as auth from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
  AngularFirestore,
  AngularFirestoreDocument,
} from '@angular/fire/compat/firestore';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class AuthService {
  userData: any; 
  constructor(
    public afs: AngularFirestore, 
    public afAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone    
  ) {
...
}

When I try to use this service in the component. It thrown this error.

export class SignupComponent {
  
  constructor(
    public authService: AuthService
  ) { }



[Error] ERROR – NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_AuthService -> _AuthService -> _AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_AuthService -> _AuthService -> _AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 

My package.json

  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.9",
    "express": "^4.18.2",
    "firebase": "^10.7.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

From what I understood, the problem is it cannot find the module. But I did put it in the providers in the app config. Isn't this the way it supposed to be? Or should I add it to the itself services? if so, How should I do it?

Thank you so much in advance!

Answer 1

Ok I am stupid. Found the issue. Since I'm using AngularFire, I have to change this

importProvidersFrom(provideFirebaseApp(() => initializeApp(environment.firebase)))  

to this:

importProvidersFrom(AngularFireModule.initializeApp(environment.firebase))

4 hours of pulling my hair!

Answer 2

Since the service is provided in the root level, add it to the providers array is optional, your code sounds good it should work may be public afs: AngularFirestore and public db: AngularFirestore are deplucated injections ! An other refactoring you can use in your app.config:

importProvidersFrom(
      provideFirebaseApp(() => initializeApp(firebaseConfig)),
      provideAuth(() => getAuth()),
      provideFirestore(() => getFirestore()),
      provideDatabase(() => getDatabase()),
      provideStorage(() => getStorage()),
      provideFunctions(() => getFunctions()),
      ....
),

I hope this duplication should solve the problem. Or check if a service A injects an other service B, within your component you inject both A and B.