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

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!