类型错误：无法读取未定义的属性“GoogleAuthProvider”

Question

使用 Angular cli v5 和 angularfire2 v5，控制台和终端上没有错误，一切运行正常，但在调用谷歌登录功能时在浏览器控制台上出现错误。

源代码：

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

时收到警告消息，消息是

[email protected] requires a peer of firebase@^4.5.0 but none was installed

，然后尝试使用4.5.0单独安装firebase。

npm install [email protected] --save

然后更改导入：

来自

import * as firebase from 'firebase/app';

到

import * as firebase from 'firebase';

现在运行良好。

注意：最后在app.module中添加了

import { AngularFireAuthModule } from 'angularfire2/auth';

以避免

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

Answer 3

在导入部分添加以下代码行：

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

在您的代码中：

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

Answer 4

终于在https://github.com/firebase/angularfire/issues/968

找到了解决方案

只需将

firebase

导入更改为

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

即可解决问题。

Answer 5

这对我有用：我正在使用 Vue.js

import firebase from 'firebase/app'
...
created() {
    let provider = new firebase.auth.GoogleAuthProvider()
}

我不确定 Angular 应该如何处理。 也许这对 Vue.js 开发人员有帮助，所以我将其留在这里。

Answer 6

在您想要使用 firebase 身份验证的 html 页面中使用它。

<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>

Answer 7

如果您只使用

import firebase from 'firebase/app'

你应该得到这个结果：

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

您可以添加：

import 'firebase/auth'

Answer 8

我不确定这是否相关，但我通过导入身份验证模块解决了类似的问题，如下所示：

import { AngularFireAuth } from '@angular/fire/auth';
import { firebase } from '@firebase/app';
import '@firebase/auth';

Answer 9

我的 firebase.js（插件）

import firebase from "firebase/app";
import "firebase/auth";
import dotenv from "dotenv";
dotenv.config();

// Import needed firebase modules

let config = {
  apiKey: process.env.VUE_APP_APIKEY,
  authDomain: process.env.VUE_APP_AUTHDOMAIN,
  databaseURL: process.env.VUE_APP_DATABASEURL,
  projectId: process.env.VUE_APP_PROJECTID,
  storageBucket: process.env.VUE_APP_STORAGEBUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_APP_ID,
  measurementId: process.env.VUE_APP_MEASUREMENT_ID
};

// Init our firebase app
firebase.initializeApp(config);

我的组件代码

import firebase from "../plugins/firebase.js";  **//error is here**
import { required, email } from "vuelidate/lib/validators";
import { mapGetters, mapMutations } from "vuex";
import { GET_LOADING, SET_LOADING } from "../store";

这是我解决问题的方法，我使用 vue 和 firebase google auth。 我正在导入我创建的插件文件（firebase.js），相反，只要您想使用google或任何其他身份验证方法lile，您就应该导入firebase/app；

import firebase/app

不是

import firebase from '../plugins/firebase.js'

现在我的组件代码如下所示。

    import firebase from "firebase/app";  
    import { required, email } from "vuelidate/lib/validators";
    import { mapGetters, mapMutations } from "vuex";
    import { GET_LOADING, SET_LOADING } from "../store";

这对我有用

Answer 10

降级

firebase

软件包是一个可行的解决方案。

在

package.json

的依赖项下，将版本从

4.13.0

更改为

4.12.0

，如下所示：

"dependencies": {
     ...
     ...
     "firebase": "4.12.0"
     ...
     ...
}

然后运行

npm install

。

Answer 11

遇到同样的错误。

"Cannot read property 'GoogleAuthProvider' of undefined"

没有使用 Angular JS，但我通过在 HTML 页面中包含 firebase auth 产品的 SDK 解决了这个问题：

<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>

Answer 12

从“firebase/app”导入{initializeApp，FirebaseApp}； 从“firebase/analytics”导入{ getAnalytics }； 从“firebase/auth”导入{signInWithPopup，GoogleAuthProvider}；

initializeApp(firebaseConfig);

initializeApp(firebaseConfig);

导出 const loginWhitGoogle = () => {

return signInWithPopup(new GoogleAuthProvider());

}

Answer 13

而不是这个：

import * as firebase from 'firebase/app';

用这个：

import firebase from 'firebase/compat/app';

我希望这个解决方案对您有用，就像对我一样！