web-dev-qa-db-fra.com

Firebase n'est pas défini?

Je travaille sur un projet Angular et j'utilise Firebase. Il commet une erreur avec ReferenceError: Firebase is not defined, mais je ne comprends pas pourquoi.

 enter image description here

c'est mon 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>

mon 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);
}]);

mon app.js

'use strict';

angular.module('myContacts', [
  'ngRoute',
  'firebase',
  'myContacts.contacts'
]).
config(['$routeProvider', function($routeProvider) {

  $routeProvider.otherwise({redirectTo: '/contacts'});
}]);

et mon 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');\""
  }
}

Dans le fichier package.json, firebase est assigné "*", je ne sais pas s'il peut le faire? Tout le reste a l'air bien ...

firebase de console

c'est le fichier bower.json

{
  "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"
  }
}

si il pourrait avoir à donner Firebase?

javascriptangularjsfirebasefirebase-realtime-database
5
sanja

Avait le même problème .. expérience horrible .. 

Finalement, j'ai trouvé ceci: https://firebase.google.com/support/guides/firebase-web

 enter image description here

4
guy mograbi

Comme d'autres l'ont mentionné, vous obtenez la dernière version de Firebase (version 3 ou supérieure) qui ne fonctionne pas avec le constructeur Firebase docs here . Vous l'obtenez parce que dans votre package.json vous avez ajouté firebase: "*"

Vous devez initialiser comme suggéré par d'autres et avant tout travail avec firebase. Cela pourrait être quelque part global, ou dans certains bloc de configuration (angulaire). Après l’initialisation, vous pouvez obtenir une référence de base de données en utilisant 

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

Avec la nouvelle version de Firebase, vous devez utiliser une version compatible avec AngularFire. Vous devez donc choisir une version supérieure à 2 (je ne sais pas très bien comment gérer les versions), ce que vous pouvez trouver dans la page GitHub . 

Vous n'avez pas du tout vu AngularFire dans votre package.json ni dans votre bower.json, mais si vous travaillez avec Firebase 3.x.x, vous aurez besoin de AngularFire 2.x.x

2
idan

"firebase": "*" dans votre package.json installera le dernier ^3.1.0 de firebase, qui n'est pas compatible avec 2.4.2 de firebase.

La nouvelle documentation est dans ici

Pour inclure et configurer firebase dans votre 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>

Vous pouvez générer automatiquement la configuration ci-dessus dans https://console.firebase.google.com/ en créant un nouveau projet.

1
KB_

L'une ou l'autre des configurations suivantes peut vous aider.

1) Vous pouvez inclure les éléments suivants dans votre balise de script index.html 

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

2) ou vous pouvez inclure les éléments suivants dans app.module.ts

importer * en tant que base de feu à partir de "base de données";

La deuxième syntaxe est préférable car vous ne codez pas les informations de version.

0
ravi