Firebase, Angularfire Error: Module Firebase Is Not Available

December 27, 2023 Post a Comment

I am trying to setup firebase, angularfire for my Yeoman, AngularJS Application. I followed this tutorial here (https://www.firebase.com/tutorial/#tutorial/angular/0) but I keep ge

Solution 1:

I had this issue and found that loading firebase, then angular, then angularfire worked fine. Like this

<head><scriptsrc="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script><scriptsrc="js/app.js"></script><scriptsrc="js/controllers.js"></script><scriptsrc="js/services.js"></script><scriptsrc="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script></head>

Solution 2:

You need to inject the firebase module in your app as dependency injection

Somewhere in your code, you have this,

varmyApp= angular.module("myApp",[]);

It should be

varmyApp= angular.module("myApp",['firebase']);

Solution 3:

This was happening to me as well.

I had added the angularfire dependency (bower install angularfire)
I had added 'firebase' into the array of dependencies when creating the module.

However, I was still getting the error "Module 'firebase' is not available".

The key was that I forgot the "--save". When I went back to my command line and ran this:

bower install angularfire --save

then it worked!

Solution 4:

In order to use AngularFire in a project, include the following script tags:

<!-- AngularJS --><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script><!-- Firebase --><scriptsrc="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script><!-- AngularFire --><scriptsrc="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

the complete tutorial: https://www.firebase.com/docs/web/libraries/angular/quickstart.html

Solution 5:

i had the same issue using node 6.10 and from the information on Uncaught ReferenceError: Firebase is not defined i tried what was suggested as follows

<head><scriptsrc='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script><scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script><linkrel='stylesheet'type='text/css'href='/resources/tutorial/css/example.css'></head>

it however did not work. so what i did was to install firebase and angularfire as follows using angular-cli

npm install firebase --save
npm install angularfire --save

inside of your AppComponent file you can define the class as follows

exportclassAppComponent {
  ...

  constructor() {
    // Initialize Firebasevar config = {
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "..."
    };
    // firebase.initializeApp(config);initializeApp(config);

    // var root = firebase.database().ref();var firebaseRec= database().ref();

    ...
  }

}

this will solve your issue with the reference to firebase being undefined

JavaScript Lib