AngularFireAuth: Cannot read property 'GoogleAuthProvider' of undefined

Question

I'm trying to do authentication with AngularFire. During ng serve, any attempt to instantiate an auth provider (such as firebase.auth.GoogleAuthProvider) results in a crash. I'm doing the exact same thing as the AngularFireAuth quickstart example. Am I missing something?

My app is quite minimal:

// app.component.ts

import { Component } from "@angular/core";
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({...})
export class AppComponent {
  constructor(private afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.afAuth.signInWithRedirect(new auth.GoogleAuthProvider());
  }
}

// app.module.ts

import { AngularFireModule } from "@angular/fire";
import { AngularFireAuthModule } from '@angular/fire/auth';
...

@NgModule({
  declarations: [AppComponent],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// package.json
  "dependencies": {
    "@angular/core": "~9.1.4",
    "@angular/fire": "^6.0.0-rc.2",
    "firebase": "7.14.3",
    ...
  },

I have found this question with a similar problem, but they're not using AngularFire, just plain Firebase. With AngularFire I don't think I'm supposed to manually include the Firebase scripts in my index.html.

Answer 1

I've found the real solution. "angular-auth-firebase" must be passed to initializeApp() when importing the AngularFire module in the app module:

@NgModule({
  declarations: [ ... ],
  imports: [
    AngularFireModule.initializeApp(environment.firebase, "angular-auth-firebase"),
    AngularFireAuthModule,
    ...
  ],
  ...
})
export class AppModule { }

---

Old answer (workaround):

I have found a workaround here. If I simply add import "firebase/auth"; to app.module.ts, everything works, though I'm not sure this should be the permanent fix.