Solvedangularfire ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Version info

Angular: 5.2.10
Firebase: 4.13.0
AngularFire: 5.0.0-rc.6.0

Other (e.g. Node, browser, operating system) (if applicable):
@firebase/app: 0.1.10
Node: v8.11.1
Browser: Google Chrome Version 65.0.3325.181 (Official Build) (64-bit)

Test case

Firebase Authentication is not working. I have tried the same code as mentioned in 5. Getting started with Firebase Authentication. Got error message as below

ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined
    at AppComponent.login (app.component.ts:46)
    at Object.eval [as handleEvent] (AppComponent.html:13)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)

Error in below line

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

Inspecting firebase shows no auth inside

Please note that I have already enabled Google Authentication from firebase console.

17 Answers

✔️Accepted Answer

Issue is till open so I want to contribute my solution:

"firebase": "^5.3.0"
import firebase from 'firebase/app';
import 'firebase/auth';

export const googleProvider = new firebase.auth.GoogleAuthProvider();

Other Answers:

I had the same problem!
Just change this:

import * as firebase from 'firebase';

in favor of

import { firebase } from '@firebase/app';

That works for me.
My dependencies:

"dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@angular/router": "5.2.10",
    "@firebase/app": "0.1.6",
    "angularfire2": "5.0.0-rc.6.0",
    "core-js": "2.4.1",
    "firebase": "4.13.1",
    "font-awesome": "4.7.0",
    "rxjs": "^5.5.10",
    "zone.js": "^0.8.26"

Hope it helps!

Had to go with this for Angular/Fire 6.0.0

import { auth } from 'firebase/app'; import 'firebase/auth';

Tried replacing import * as firebase from 'firebase/app';import * as firebase from 'firebase'; as suggested by this post

But no luck.

Asked for help in Stackoverflow too

Thanks @SMontiel, import { firebase } from '@firebase/app'; solved the issue.