web-dev-qa-db-fra.com

firebase.database n'est pas une fonction

J'essaie de mettre à niveau une version antérieure de Firebase vers la dernière version de mon projet ionic . J'ai suivi this tutorial pour la mise à niveau. À l'étape 4 de cette page, je suis bloqué sur la dernière déclaration firebase.database().ref();. 

Message d'erreur

TypeError: firebase.database is not a function

Ci-dessous mon code. Aide aimablement.

...

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

Mettre à jour

Après avoir ajouté la dernière bibliothèque de base de données, ce problème de questions est résolu.

Mettre à jour mon code ici

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
22
user801116

J'ai rencontré cela avec Ionic et il s'est avéré que je n'utilisais pas tout lorsque j'utilisais le dernier client Firebase. Si vous avez inclus Firebase en tant que firebase-app, les éléments Base de données et Auth doivent être requis séparément, car ils ne sont pas regroupés lorsque vous incluez Firebase de cette manière. 

Ajoutez les éléments suivants à votre index.html après avoir inclus 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>

Évidemment, vous n'avez pas besoin d'utiliser le CDN, vous pouvez utiliser bower (probablement le moyen préféré avec Ionic) ou NPM avec Browserify.

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

Extrait ci-dessous tiré de Documents de configuration Web de Firebase

Vous pouvez réduire la quantité de code utilisée par votre application en incluant simplement les fonctionnalités dont vous avez besoin. Les composants pouvant être installés individuellement sont:

firebase-app - Le client principal de firebase (requis).
firebase-auth - Authentification Firebase (facultatif).
firebase-database - La base de données en temps réel Firebase (facultatif).
firebase-storage - Firebase Storage (facultatif). 

À partir du CDN, incluez les composants individuels dont vous avez besoin (incluez d'abord firebase-app)

22
peteb

Un peu tard pour la soirée, mais au cas où quelqu'un voudrait connaître la syntaxe angulaire (ou Ionic 4), ajoutez simplement ceci à votre fichier .module.ts (notez, comme l'a mentionné peterb, l'import/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: [
  ]
})
0
Ruan