Angular 15 Standalone AppComponent and AngularFireAuth

Question

I am trying to set up an Angular webapp where the AppComponent is standalone itself using Firebase Authentication (and database). Therefore no NgModules.

I added in the main.ts

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(firebaseConfig)),

    ),
    importProvidersFrom(
      provideFirestore(() => getFirestore())
    ),
  ...
  ]

And in the AppComponent I added the other imports:

@Component({
  standalone: true,
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
  imports: [
    RouterModule,
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule
  ]
})
export class AppComponent {

I don't have any specific error, but once I try to inject in the constructor AngularFireAuth I get the following error:

I have also tried to add

importProvidersFrom(AngularFireAuthModule),

in the providers of the main.ts but it didn't help.

Does anyone know how I might solve this issue or know what I am doing wrong?

Thanks in advance :)

Answer 1

The InjectionToken('angularfire2.app.options') is provided in the AngularFireModule module, not in the AngularFireAuthModule.

To resolve the issue, the AngularFireModule.initializeApp() should be used with the importProvidersFrom in the main.ts:

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(AngularFireModule.initializeApp(environment.firebase)),
    // ...
  ]
})