Menu
I'm working on an Angular project and use Firebase, and it's erroring with ReferenceError: Firebase is not defined, but I can not figure out why.
this is my index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Contacts App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContacts</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
my contact.js
'use strict';
angular.module('myContacts.contacts', ['ngRoute', 'firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
var ref = new Firebase('https://<my_project_name>.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(ref);
console.log($scope.contacts);
}]);
my app.js
'use strict';
angular.module('myContacts', [
'ngRoute',
'firebase',
'myContacts.contacts'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/contacts'});
}]);
and my package.json
{
"name": "angular-seed",
"private": true,
"version": "0.0.0",
"description": "A starter project for AngularJS",
"repository": "https://github.com/angular/angular-seed",
"license": "MIT",
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"karma-junit-reporter": "^0.4.1",
"protractor": "^3.2.2",
"shelljs": "^0.6.0",
"firebase": "*"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1 ./app",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + sed(/sourceMappingURL=angular-loader.min.js.map/,'sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map','app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
}
}
In package.json file I firebase assigned "*", I do not know if it can do it? Everything else looks good...
firebase from console
this is bower.json file
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "~1.5.0",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0"
}
}
whether there might have to give Firebase?
717
Had the same issue.. awful experience..
Eventually, found this: https://firebase.google.com/support/guides/firebase-web
58
As others have mentioned, you're getting the latest version of Firebase (3 and up) which doesn't work with the Firebase constructor docs here. You're getting it because in your package.json you added firebase: "*"
You should initialize as others suggested and before any work with firebase is done. This could be someplace global, or in some config block (angular's). After initialization you can get a database reference using
var rootRef = firebase.database().ref();
With the new Firebase version, you need to use a compatible AngularFire version, so you'll need it to be above 2 (confusing versioning, I know), which you can find documentation for in their GitHub page.
Didn't see AngularFire at all in your package.json nor in your bower.json but if you're working with Firebase 3.x.x then you'll need AngularFire 2.x.x
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
