AngularFire - ReferenceError: Firebase not defined

Question

I have included the Firebase and AngularFire js files via CDN. I have injected the AngularFire into my app and thereafter injected the $firebaseArray into my controller. Yet for some reason I am still getting the 'Firebase not defined error' in my dev console.

I have looked at the following links:

AngularFire - Firebase not defined

Firebase Error - "FireBase is not defined"

Angularfire 'Firebase' is not defined

Angularfire Uncaught ReferenceError: Firebase is not defined

and none of them addresses my situation. Am I missing something? I am including my code below:

//App
angular.module("TestApp", ['ngAnimate', 'ui.router', 'ui.bootstrap', 'firebase']);

//Controller
angular.module('TestApp')
.controller('DetailsController',['$scope', '$firebaseArray', '$http', function ($scope, $firebaseArray, $http) {

    console.log($firebaseArray); // <- verified here that the injection works
    var rootRef = new Firebase("https://<my-ref-url>.firebaseio.com");

    //load data from firebase db
    $scope.loadCommunity = function(){

        $scope.hasCommunity = true;
        $scope.messages = $firebaseArray(rootRef);

    };

}]);

and the following is the code I included in the index.html file:

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

<script>
  // Initialize Firebase
  var config = {
    apiKey: "MY API KEY HERE",
    authDomain: "<my-ref-url>.firebaseapp.com",
    databaseURL: "<my-ref-url>.firebaseio.com",
    storageBucket: "",
  };
  firebase.initializeApp(config);
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/2.0.1/angularfire.min.js"></script>

adolfosrs · Accepted Answer · 2016-07-01 15:40:57Z

3

The problem is that you are trying to get the rootRef using new Firebase("https://<my-ref-url>.firebaseio.com"); and thats from the legacy 2.x firebase sdk.

This is one of the changes of firebase 3.x. You have to do this in a slightly different way.

var rootRef = firebase.database().ref();

You can do some tests using this jsFiddle

answered Jul 1, 2016 at 15:40

adolfosrs

9,3896 gold badges45 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SpiderWasp42 Over a year ago

Worked like a charm. Thank you. I was following the David Yeast tutorial video on the Google Developers channel on Youtube. I didn't realize that it was outdated. Cheers!

Hantsy Over a year ago

How to resole this prolem when use ES6. import 'firebase' does not work.

Collectives™ on Stack Overflow

AngularFire - ReferenceError: Firebase not defined

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related