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

同时使用以下两种进口。它应该可以解决您的问题。

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

请注意，如下所示导入整个firebase（开发SDK）也可以，但在控制台中会收到警告，提示您仅导入要使用的单个SDK组件。 在将Firebase应用程序部署到生产环境时，不建议使用此方法。

import * as firebase from 'firebase';

Answer 2

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

现在运行正常。

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

Answer 3

最后在https://github.com/firebase/angularfire/issues/968

获得解决方案

只需将firebase导入更改为import { firebase } from '@firebase/app';即可解决问题。

Answer 4

我的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";

enter image description here

这是我为解决问题所做的工作，正在使用vue和firebase谷歌身份验证。我正在导入我创建的（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 5

降级firebase包是一个可行的解决方案。

在package.json的依赖项下，将版本从4.13.0更改为4.12.0，如下所示：

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

然后运行npm install。

Answer 6

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

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

我不确定Angular应该如何。也许这可以为Vue.js开发人员提供帮助，所以我将其留在这里。

Answer 7

在您要使用Firebase身份验证的html页面中使用此选项。

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

Answer 8

如果您仅使用import firebase from 'firebase/app'

您应该得到以下结果：

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

您可以添加：

import 'firebase/auth'

Answer 9

得到相同的错误。 "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 10

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

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

在您的代码中：

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

Answer 11

我不确定这是否相关，但是我通过导入auth模块来解决类似的问题：

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

TypeError：无法读取属性＆＃39; GoogleAuthProvider＆＃39;未定义的

11 个答案: