2016-06-04 1 views
5

Ich arbeite an einem Angular-Projekt und Firebase verwenden, und es ist mit ReferenceError: Firebase is not defined Fehler, aber ich kann nicht herausfinden, warum.Firebase ist nicht definiert?

enter image description here

das ist mein 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> 

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

mein app.js

'use strict'; 

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

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

und meine 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', /\\/\\/@@[email protected]@[\\s\\S]*\\/\\/@@[email protected]@/, '//@@[email protected]@\\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//@@[email protected]@', 'app/index-async.html');\"" 
    } 
} 

In package.json Datei ich Firebase zugewiesen "*", ich weiß nicht, ob es das kann? Alles andere sieht gut aus ...

firebase from console

dies bower.json Datei

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

, ob es vielleicht Firebase geben?

+0

Gibt es weitere Fehler auf der Konsole? Wurden die 'firebase.js' von Bower-Komponenten geladen? Können Sie auf das Firebase-Objekt von der Konsole aus zugreifen? Es sieht so aus, als ob du "bower" als Abhängigkeitsmanager benutzt und "bower install" ausführen musst. Die andere Option besteht darin, zu 'npm' (und' node_modules' von 'bower_components') zu wechseln und' npm install' mit dem angegebenen 'package.json' auszuführen. –

+0

keine anderen Fehler, und kann Firebase von der Konsole zugegriffen werden, weiß ich nicht, was könnte das Problem sein ... – sanja

+0

Gibt es etwas in Ihrem 'index.html', die die 'contacts.js' Datei _before_' Firebase enthalten kann .js' ist geladen? Auch wenn Sie auf 'firebase'-Objekt zugreifen können, können Sie auch auf den' Firebase'-Konstruktor auf der Konsole zugreifen? –

Antwort

1

"firebase": "*" in Ihrem package.json wird die neueste Firebase ^3.1.0 installieren, die nicht kompatibel mit firebase 2.4.2 ist.

Die neue Dokumentation ist in here

einzubeziehen und Feuerbasis in Ihrer index.html konfiguriert:

<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> 

Sie können in https://console.firebase.google.com/ die Config oben automatisch generieren, indem ein neues Projekt anlegen.

+0

und was dann? Wie kommst du zu 'new Firebase()'? es ist immer noch undefined –

+0

Und dann brauchst du 'new Firebase()' nicht. Sie können eine Referenz mit 'firebase.database() erhalten. Ref()' – idan

4

hatte das gleiche Problem .. schreckliche Erfahrung ..

Schließlich fand dies: https://firebase.google.com/support/guides/firebase-web

enter image description here

+0

Ich habe dieses besondere Problem und verwende die Methode, die hier beschrieben wird, aber mit dem gleichen Fehler, so dass es scheint, dass es eine alternative zugrunde liegende Ursache gibt. –

2

Wie andere erwähnt haben, sind Sie die neueste Version von Firebase bekommen (3 und up), die nicht mit dem Firebase-Konstruktor docs here funktioniert. Sie erhalten es, weil Sie in Ihrem package.json hinzugefügt firebase: "*"

Sie sollten initialisieren, wie andere vorgeschlagen und bevor jede Arbeit mit Firebase getan wird. Dies könnte irgendwo global sein, oder in irgendeinem Konfigurationsblock (eckig). Nach der Initialisierung können Sie eine Datenbankreferenz erhalten mit

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

Mit der neuen Version Firebase, benötigen Sie eine kompatible AngularFire Version zu verwenden, so dass Sie sie brauchen mehr als 2 zu sein (verwirrend Versionierung, ich weiß), wo Sie Dokumentation für in ihrem GitHub page finden können.

Haben Sie nicht sehen AngularFire überhaupt in Ihrem package.json noch in Ihrem bower.json aber wenn Sie mit Firebase 3.xx arbeiten sind dann werden Sie AngularFire 2.xx

0
  1. Gehen Sie zu Ihrem Projekt benötigen Feuerbasis/App-Konsole. Firebase app console
  2. Klicken Sie auf „Hinzufügen Firebase auf Ihre Web-App“
  3. Dann werden Sie einige Skript gegeben werden. Firebase initialization script Fügen Sie diese zu Ihrem Projektscript hinzu, bevor Sie Firebase verwenden.

Das ist es.

0

Eine der folgenden Konfigurationen kann Ihnen helfen.

1) Sie können die folgenden in Ihrem Skript-Tag von index.html

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

2) oder Sie können die folgenden in app.module.ts

importieren * als Firebase von "firebase";

Die zweite Syntax ist besser, da Sie keine Versionsinformationen hart codieren.