Error: Can't find variable: Firebase (angularjs and angular fire)

Question

I'm new to firebase and angularfire. In my app, I'm trying to create a new item (a teacher object) in a firebase database. I keep getting Error: Can't find variable: Firebase.

I have included following script tags in index.html:

<script type="text/javascript" src="../libs/firebase/firebase.js"></script>
<script type="text/javascript" src="../libs/angular/angularfire/angularfire.js"></script>

Then, in my app.js I have included firebase like:

angular.module('app', ['firebase']);

My controller is:

app.controller('teacherCreateCtrl', ['$scope', '$state', 'Teacher', '$firebase', function($scope, $state, Teacher, $firebase) {
   var ref = new Firebase("https://xxx-xxxxxx.firebaseio.com/app/teachers");
   var firebaseConnection = $firebase(ref);
   $scope.teacher = new Teacher();
   $scope.userClickedCancel = function() {
      $state.go('app.teacher');
   }
   $scope.userClickedSave = function(newTeacher) {
      firebaseConnection.$set(newTeacher);
   }
}]);

Code execution stops at var ref = ... in the controller. Appreciate any help. Thanks.

I'm using firebase 3.4.0v and angularfire 2.0.2v. Note that, my template that used this controller is embedded in index.html as a view.

André Kool · Accepted Answer · 2016-09-19 15:18:35Z

2

You are mixing up your versions. If you are using v3.x firebase you can't use v2.x code. So instead of:

var ref = new Firebase("https://xxx-xxxxxx.firebaseio.com/app/teachers");

You have to do it like this:

var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Check out the docs for more info.

answered Sep 19, 2016 at 15:18

André Kool

4,97812 gold badges36 silver badges44 bronze badges

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

Comments

MarcoS · Accepted Answer · 2016-09-19 15:27:17Z

0

From Firebase Angular quickstart:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
...
var app = angular.module("sampleApp", ["firebase"]);
...
app.controller("SampleCtrl", function($scope, $firebaseObject) {
  var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
  $scope.data = $firebaseObject(ref);
  console.log($scope.data);
});

everything looks right... Are you sure you did include angular sources, too?

Otherwise, you should share the relevant parts of your code...

edited Sep 19, 2016 at 15:27

answered Sep 19, 2016 at 15:06

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

2 Comments

kovac Over a year ago

Yeah I've already loaded angularjs in a script tag... I feel like firebase.js code is somehow not available in the context of this controller, I just don't get how... I just basically followed the docs without trying anything clever.

MarcoS Over a year ago

Does your browser developer console or network tab do show any error?

Collectives™ on Stack Overflow

Error: Can't find variable: Firebase (angularjs and angular fire)

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related