angularfirebase-authenticationangular-cligoogle-oauthangularfire2

TypeError: Cannot read property 'GoogleAuthProvider' of undefined


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() {  }
}

Solution

  • Got warning message while npm install again, the message is angularfire2@5.0.0-rc.5-next requires a peer of firebase@^4.5.0 but none was installed, then tried to install firebase alone with 4.5.0.

    npm install firebase@4.5.0 --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!