TypeError：无法读取未定义的属性“ GoogleAuthProvider”

Question

使用Angular cli v5和angularfire2 v5，在控制台和终端上没有错误，它们都运行良好，但是在调用google登录功能时却在浏览器控制台上出错。

源代码 ：

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

npm install再次收到警告消息，消息是angularfire2@5.0.0-rc.5-next requires a peer of firebase@^4.5.0 but none was installed，然后尝试使用 4.5.0 单独安装 firebase。

npm install firebase@4.5.0 --save

然后更改了导入：

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

到 import * as firebase from 'firebase';

现在运行良好。

注意：最后import { AngularFireAuthModule } from 'angularfire2/auth';在 app.module 中添加以避免Uncaught (in promise): Error: No provider for AngularFireAuth!

Answer 2

使用以下两个导入。它应该可以解决您的问题。

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

请注意，像下面这样导入整个 firebase（开发 SDK）也可以正常工作，但您会在控制台中收到警告，提示您仅导入您打算使用的各个 SDK 组件。将 Firebase 应用部署到生产环境时，不建议使用此方法。

import * as firebase from 'firebase';