2016-06-04 21 views
5

मैं एक कोणीय परियोजना पर काम कर रहा हूं और फायरबेस का उपयोग कर रहा हूं, और यह ReferenceError: Firebase is not defined के साथ त्रुटि कर रहा है, लेकिन मुझे पता नहीं चल रहा है कि क्यों।फायरबेस को परिभाषित नहीं किया गया है?

enter image description here

इस

मेरी 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> 

मेरी 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); 
}]); 

मेरी app.js

'use strict'; 

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

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

और मेरे 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');\"" 
    } 
} 

पैकेज.जेसन फ़ाइल में I firebase "*" असाइन किया गया, मुझे नहीं पता कि यह ऐसा कर सकता है या नहीं? बाकी सब कुछ अच्छा लग रहा है ...

firebase from console

इस 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" 
    } 
} 

कि क्या वहाँ Firebase देने के लिए हो सकता है है?

+0

क्या कंसोल पर कोई अन्य समस्या है? विशेष रूप से, बोवर घटकों से 'firebase.js' लोड किया था? क्या आप कंसोल से 'फायरबेस' ऑब्जेक्ट तक पहुंच सकते हैं? ऐसा लगता है कि आप अपने निर्भरता प्रबंधक के रूप में 'बॉवर' का उपयोग कर रहे हैं और उसे 'बॉवर इंस्टॉल' चलाने की आवश्यकता हो सकती है। दूसरा विकल्प 'npm' (और' bower_components' से 'node_modules') पर जाना है और अपने दिए गए 'package.json' के साथ' npm install' चलाएं। –

+0

कोई अन्य त्रुटि नहीं है, और कंसोल से फ़ायरबेस का उपयोग किया जा सकता है, मुझे नहीं पता कि समस्या क्या हो सकती है ... – sanja

+0

क्या आपके 'index.html' में कुछ भी है जिसमें 'contact.js' फ़ाइल _before_' firebase शामिल हो सकती है .js' लोड हो गया है? इसके अलावा, हालांकि आप 'फायरबेस' ऑब्जेक्ट तक पहुंच सकते हैं, क्या आप कंसोल पर 'फायरबेस' कन्स्ट्रक्टर तक भी पहुंच सकते हैं? –

उत्तर

1

"firebase": "*" आपके package.json में नवीनतम फ़ायरबेस ^3.1.0 स्थापित करेगा जो फ़ायरबेस 2.4.2 के साथ संगत नहीं है।

नई प्रलेखन here

में है शामिल हैं और आपका index.html में firebase कॉन्फ़िगर करें:

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

आप config ऊपर https://console.firebase.google.com/ में ऑटो-उत्पन्न कर सकते हैं एक नई परियोजना बनाने के द्वारा।

+0

पर अपग्रेड करें और फिर क्या? आप 'नया फायरबेस() 'कैसे प्राप्त करते हैं? यह अभी भी –

+0

अपरिभाषित है और फिर आपको 'नया फायरबेस() 'की आवश्यकता नहीं है। आप 'firebase.database() के साथ संदर्भ प्राप्त कर सकते हैं। Ref()' – idan

4

एक ही मुद्दा .. भयंकर अनुभव ..

था आखिरकार इस पाया: https://firebase.google.com/support/guides/firebase-web

enter image description here

+0

मेरे पास यह विशेष समस्या है और यहां उल्लिखित विधि का उपयोग कर रहा हूं, लेकिन एक ही त्रुटि के साथ, ऐसा लगता है कि एक वैकल्पिक अंतर्निहित कारण हो सकता है। –

2

दूसरों के रूप में उल्लेख किया है, तो आप Firebase के नवीनतम संस्करण को हो रही है (3 और अप) जो फायरबेस कन्स्ट्रक्टर docs here के साथ काम नहीं करता है। आप इसे प्राप्त कर रहे हैं क्योंकि आपके package.json में आपने firebase: "*"

आपको दूसरों को सुझाव दिया जाना चाहिए और फ़ायरबेस के साथ किसी भी काम से पहले प्रारंभ करना चाहिए। यह कुछ जगह वैश्विक हो सकता है, या कुछ विन्यास ब्लॉक (कोणीय) में हो सकता है। आरंभीकरण के बाद आप ताकि आप इसे की आवश्यकता होगी ऊपर 2 होने के लिए, का उपयोग कर

var rootRef = firebase.database().ref(); 
नई Firebase संस्करण के साथ

आपको एक संगत AngularFire संस्करण का उपयोग करने की जरूरत है एक डेटाबेस संदर्भ प्राप्त कर सकते हैं (भ्रमित संस्करण, मुझे पता है), जिसे आप अपने GitHub page में दस्तावेज़ ढूंढ सकते हैं।

अपने package.json में बिल्कुल न ही अपने bower.json में लेकिन अगर आप Firebase 3.xx साथ काम कर रहे तो आप अपने firebase परियोजना के लिए AngularFire 2.xx

0
  1. जाओ की आवश्यकता होगी AngularFire नहीं देखा/ऐप कंसोल Firebase app console
  2. "अपने वेब ऐप में फायरबेस जोड़ें" पर क्लिक करें
  3. फिर आपको कुछ स्क्रिप्ट दी जाएगी। Firebase initialization script फ़ायरबेस का उपयोग करने से पहले अपनी प्रोजेक्ट स्क्रिप्ट में जोड़ें।

यही है।

0

या तो निम्न कॉन्फ़िगरेशन में से कोई भी आपकी सहायता कर सकता है।

1) आप index.html

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

की अपनी स्क्रिप्ट टैग में निम्न शामिल कर सकते हैं 2) या आप निम्नलिखित में शामिल कर सकते हैं app.module.ts

आयात * "फायरबेस" से फायरबेस के रूप में;

दूसरा वाक्यविन्यास बेहतर है क्योंकि आप किसी भी संस्करण की जानकारी को हार्ड कोडिंग नहीं कर रहे हैं।

संबंधित मुद्दे