web-dev-qa-db-ja.com

firebase.databaseは関数ではありません

ionic project で以前のfirebaseバージョンから最新のものにアップグレードしようとしています。 this アップグレードのチュートリアルに従いました。このページのステップ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;
}
javascriptangularjsionic-frameworkfirebasefirebase-realtime-database
32
user801116

Ionicでこれに遭遇し、最新のFirebase Clientを使用するときにすべてを含めていなかったことが判明しました。Firebaseをfirebase-appとして含めた場合、データベースとこの方法でFirebaseを含める場合、Authピースはバンドルされないため、Authピースは別途必要です。

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で推奨される方法）または [〜＃〜] npm [〜＃〜] を使用できます。 Browserify。

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

Firebase Web Setup Docs から抜粋した以下のスニペット

必要な機能を含めるだけで、アプリが使用するコードの量を減らすことができます。個別にインストール可能なコンポーネントは次のとおりです。

firebase-app-コアのfirebaseクライアント（必須）。
firebase-auth-Firebase認証（オプション）。
firebase-database-Firebase Realtime Database（オプション）。
firebase-storage-Firebase Storage（オプション）。

CDNから、必要な個々のコンポーネントを含めます（最初にfirebase-appを含めます）

40
peteb

パーティーに少し遅れましたが、誰かが角度の構文を知りたい場合（またはIonic 4）はこれを.module.tsファイルに追加してください（peterbが言及したように、 、/ database import）

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

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

また、@ angular/firebase 5.1.2でこの問題に直面し、@ angular/cliおよびすべての依存関係を最新バージョンに更新すると解決しました。

0
Maksim Klimenko

同じエラーがあります-firebase.database is a function- but with differentシチュエーションを追加するだけです

上記とFirebase設定を含むjavascriptのリンク。

ページ要素がロードされるまでスクリプトをロードしないため、スクリプトでdefer属性を使用することもできます。

0
Mahmoud Ahmed Faragallah