firebase.database 不是函数

IT技术 javascript angularjs ionic-framework firebase firebase-realtime-database
2021-01-20 15:47:37

我正在尝试从较早的 firebase 版本升级到我的ionic 项目中的最新版本我按照教程进行升级。在此页面的第 4 步中,我被困在最后一条语句上firebase.database().ref();

错误信息

TypeError: firebase.database is not a function

下面是我的代码。请帮助。

...

// Initialize Firebase
this.config = {
    apiKey: "some-api-key",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
    storageBucket: "project-somenumber.appspot.com",
};

...

this.authWithOAuthPopup = function(type) {
    var deferred = $q.defer();
    console.log(service.config);    // ---> Object {apiKey: "some-api-key", authDomain: "myapp.firebaseapp.com", databaseURL: "https://myapp.firebaseio.com", storageBucket: "project-somenumber.appspot.com"}
    firebase.initializeApp(service.config);
    console.log(firebase);  // ---> Object {SDK_VERSION: "3.0.5", INTERNAL: Object}
    service.rootRef = firebase.database().ref(); //new Firebase("https://rsb2.firebaseio.com"); ---> I am getting error on this line "TypeError: firebase.database is not a function"
    service.rootRef.authWithOAuthPopup(type, function(error, authData) {
        if (error) {
            service.authError = error;
            switch (error.code) {
                case "INVALID_EMAIL":
                    console.log("The specified user account email is invalid.");
                    break;
                case "INVALID_PASSWORD":
                    console.log("The specified user account password is incorrect.");
                    break;
                case "INVALID_USER":
                    console.log("The specified user account does not exist.");
                    break;
                default:
                    console.log("Error logging user in:", error);
            }
            deferred.resolve(service.authError);
        } else {
            service.authData = authData;
            console.log("Authenticated successfully with payload:", authData);
            deferred.resolve(service.authData);
        }
        return deferred.promise;
    });
    return deferred.promise;
}

var service = this;

更新

添加最新的数据库库后,这个问题就解决了。

在这里更新我的代码

this.authWithOAuthPopup = function(type) {
    var deferred = $q.defer();
    console.log(service.config);
    firebase.initializeApp(service.config);
    console.log(firebase);
    service.rootRef = firebase.database(); //.ref(); //new Firebase("https://rsb2.firebaseio.com");

    var provider = new firebase.auth.FacebookAuthProvider();
    firebase.auth().signInWithRedirect(provider);
    firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
            // This gives you a Facebook Access Token. You can use it to access the Facebook API.
            var token = result.credential.accessToken;
            console.log(result);
            // ...
        }
        // The signed-in user info.
        var user = result.user;
    }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
    });
    return deferred.promise;
}
6个回答

我在使用 Ionic 时遇到了这个问题,结果发现在使用最新的 Firebase 客户端时我没有包含所有内容。如果您已将 Firebase 包含为firebase-app,则需要分别需要 Database 和 Auth 部分,因为以这种方式包含 Firebase 时它们不会捆绑在一起。

index.html在包含之后将以下内容添加到您的firebase-app.js

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

显然您不需要使用 CDN,您可以使用bower(可能是 Ionic 的首选方式)或带有 Browserify 的NPM

// Browserify Setup
var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');

下面的片段取自Firebase Web 设置文档

您可以通过仅包含您需要的功能来减少您的应用程序使用的代码量。可单独安装的组件是:

firebase-app - 核心 firebase 客户端(必需)。
firebase-auth - Firebase 身份验证(可选)。
firebase-database - Firebase 实时数据库(可选)。
firebase-storage - Firebase 存储(可选)。

在 CDN 中,包含您需要的各个组件(首先包含 firebase-app)

这很疯狂,因为firebase的官方文档(firebase.google.com/docs/web/setup)目前没有显示gstatic.com/firebasejs/6.1.0/firebase-database.js的链接 他们只是说,使用适当的库。如果您查看 CDN 部分,firebase-database.js 未列出,但这是实时数据库所需的。
2021-03-16 15:47:37

参加聚会有点晚了,但如果有人想知道 angular(或 Ionic 4)的语法,只需将其添加到您的 .module.ts 文件中(注意,正如 peterb 提到的,/database 导入)

import { AuthService } from './auth.service';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';

@NgModule({
  imports: [
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(environment.firebase),
  ],
  providers: [
  ]
})

我通过在构造函数 firebase.database('https://123.firebaseio.com') 中提供 url 解决了这个问题

首先,请确保您正在使用

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

FirebaseauthWithOAuthPopup在新版本中发生了一些变化。

现在您不使用 ref 来调用身份验证方法。你应该使用firebase.auth()insted。

var auth = firebase.auth();
var provider = new firebase.auth.TwitterAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  // User signed in!
  var uid = result.user.uid;
}).catch(function(error) {
  // An error occurred
});
文档建议对移动设备使用重定向方法。因此,我可以使用重定向方法使用 Facebook 进行身份验证,但这会重新加载我的网页(目前正在 chrome 上测试 ionic 应用程序)并且我无法获取有效负载详细信息。我已经更新了上面的代码
2021-04-09 15:47:37

在@angular/firebase 5.1.2 上也遇到了这个问题,当更新@angular/cli 和所有依赖项到最新版本时解决了。