Firebase, AngularFire Error: Module firebase is not available

1
votes

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 getting a

Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the m...<omitted>...1)

How do I get past this?

I believe it is these two line from the tutorial which says it downloads firebase for us but I might be putting it in the wrong place. I tried putting it inbetween the head tags, right by the bower components, as well as next to all my scripts

<script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
5
javascriptangularjsfirebaseyeomanangularfire
Your edit is the problem. The scripts are in the right place on the page, they just aren't found on the server (what a great tutorial). If you look in the console, you'll see 404 errors. Apparently, there is no version 0.8.0 of AngularFire. If you look on their Github page, you'll see versions 0.7.1, 0.7.0, 0.6.0, 0.5.0 and so on. If you replace the 0.8.0 in the script URL with one of those versions, it should work. - Ian
@Ian regarding the tutorial now I am getting a "app/scripts/controllers/main.js line 32 col 23 'Firebase' is not defined." but I also got that from the tutorial. How should I go about getting this to work? - stcho
Here is the question for the problem stated just previously stackoverflow.com/questions/25021640/… - stcho
Solved it using generator-angularfire with specified versions of angularfire. More detail here github.com/firebase/generator-angularfire/issues/21 - stcho

5 Answers

5
votes

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

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

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

Somewhere in your code, you have this,

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

It should be

var myApp = angular.module("myApp",['firebase']);
0
votes

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!

0
votes

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

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>

<!-- AngularFire -->
<script src="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

0
votes

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>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='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

export class AppComponent {
  ...

  constructor() {
    // Initialize Firebase
    var 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