TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Question

Using Angular cli v5 and angularfire2 v5, There is no error on console and terminal, all running fine but while calling google login function getting error on browser console.

Source code :

import { Component, OnInit, HostBinding  } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { moveIn } from '../router.animations';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AngularFireAuth],
  animations: [moveIn()],
  host: {'[@moveIn]': ''}
})
export class LoginComponent implements OnInit {

  error: any;
  constructor(public afAuth: AngularFireAuth) {  }

  loginGoogle() {
     this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
     this.afAuth.auth.signOut();
  }

  ngOnInit() {  }
}

Answer 1

Use both the below imports. It should solve your issue.

import * as firebase from 'firebase/app';
import 'firebase/auth';

Note that importing the whole firebase (development SDK) like below will work just as fine, but you will get a warning in the console to import only the individual SDK components you intend to use. This method is not recommended when deploying Firebase apps to production.

import * as firebase from 'firebase';

Answer 2

Got warning message while npm install again, the message is [email protected] requires a peer of firebase@^4.5.0 but none was installed, then tried to install firebase alone with 4.5.0.

npm install [email protected] --save

then changed the import :

from import * as firebase from 'firebase/app';

to import * as firebase from 'firebase';

Runs fine now.

Note : finally added import { AngularFireAuthModule } from 'angularfire2/auth'; in app.module to avoid Uncaught (in promise): Error: No provider for AngularFireAuth!

Answer 3

At import section add these lines of code:

import * as firebase from 'firebase/app'; import 'firebase/auth';

In your code:

firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());