CODEWITHSUNDEEP
javascriptangularjsfirebasefirebase-realtime-database
sanja
sanja

Reputation: 135

Firebase is not defined?

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.

enter image description here

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?

Upvotes: 7

Views: 27034

Answers (6)

hpm
hpm

Reputation: 1

In case of a hosting project the catch is that local script files are loading before Firebase. To prevent that, simply load them 'deferred', like this:

<script defer src="app.js"></script>

Thanks to this post by Paul De Jong!

Upvotes: -1

ravi
ravi

Reputation: 11

Either one of the following configuration can help you.

1) You can include the following in your script tag of index.html

src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"

2) or you can include the following in app.module.ts

import * as firebase from "firebase";


Second syntax is better as you are not hard coding any version information.

Upvotes: 0

M H Rahman
M H Rahman

Reputation: 49

  1. Go to your firebase project/app console. Firebase app console
  2. Click "Add Firebase to your web app"
  3. Then you will be given some script. Firebase initialization script Add those to your project script before using the Firebase.

That's it.

Upvotes: -1

idan
idan

Reputation: 484

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

Upvotes: 2

KB_
KB_

Reputation: 2123

"firebase": "*" in your package.json will install the latest firebase ^3.1.0 which is not compatible with firebase 2.4.2.

The new documentation is in here

To include and configure firebase in your index.html:

 <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>


  <script>
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
    var config = {
        apiKey: "your apiKey from firebase website",
        authDomain: "projectId.firebaseapp.com",
        databaseURL: "https://databaseName.firebaseio.com",
        storageBucket: "bucket.appspot.com",
      };
        firebase.initializeApp(config);

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

</script>

You can auto-generate the config above in https://console.firebase.google.com/ by creating a new project.

Upvotes: 1

guy mograbi
guy mograbi

Reputation: 28598

Had the same issue.. awful experience..

Eventually, found this: https://firebase.google.com/support/guides/firebase-web

enter image description here

Upvotes: 5

Related Questions