angularfire: ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AuthModule)[AuthService -> AuthService -> AngularFirestore -> InjectionToken

Hi! This works for me. I put this in app.module.ts

import { FIREBASE_OPTIONS } from ‘@angular/fire/compat’;

@NgModule({ … providers: [ { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig } ], })

I see this pretty chaotic. The samples are so out of date and one cannot really follow them. I am getting the same errors.

I was able to initialize my module like this, and I try to stay our of compact/ package as it gives tons of errors.

import {initializeApp, provideFirebaseApp} from '@angular/fire/app';
import {connectFirestoreEmulator, getFirestore, provideFirestore} from '@angular/fire/firestore';
import {connectStorageEmulator, getStorage, provideStorage} from '@angular/fire/storage';
import {Auth, connectAuthEmulator, getAuth, provideAuth} from '@angular/fire/auth';


provideAuth(() => {
      const auth = getAuth();
      if (environment.useEmulators) {
        connectAuthEmulator(auth, 'http://localhost:9099', {disableWarnings: true});
      }
      auth.useDeviceLanguage();
      setPersistence(auth, indexedDBLocalPersistence);
      return auth;
    }),

I am not really sure which API or which documentation should I follow

https://github.com/angular/angularfire/blob/master/site/src/auth/route-guards.md or https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md

If I use the one from /site/ then it is also out of sync with latest code as this import is invalid.

import { AngularFireAuthGuard } from '@angular/fire/auth-guard';

Hi, I had same problem, I solved adding AngularFireModule.initializeApp(environment.firebaseConfig) into imports of AppModule

import { AngularFireModule } from ‘@angular/fire/compat’; import { environment } from ‘src/environments/environment’;

@NgModule({ declarations: [AppComponent], imports: [ AppRoutingModule, BrowserModule, AngularFireModule.initializeApp(environment.firebaseConfig), ], providers: […], bootstrap: [AppComponent], })

Same here! I use a config generated by @angular/fire schematic:

  imports: [
    //....
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
  ],

I get the same error

You need to import the old module as a work around, “AngularFireModule.initializeApp(environment.firebase)”

you need to declare the providers :

@NgModule({
  declarations: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    AuthRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
  ],
  providers : [
    AuthService
  ]
})
export class AuthModule { }

although my AuthService has the following meta data

@Injectable({
  providedIn: 'root'
})

I dont know why its is not working