TypeError: Cannot read property 'GoogleAuthProvider' of undefined

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());

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';

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!