Question

我正在使用Angular项目并使用Firebase，并且它与ReferenceError: Firebase is not defined发生了错误，但我无法弄清楚原因。

这是我的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', /\\/\\/@@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');\""
  }
}

在package.json文件中我分配了firebase＆＃34; *＆＃34;，我不知道它是否可以做到？其他一切看起来都不错......

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？

Answer 1

有同样的问题..糟糕的经历..

最终找到了这个：https://firebase.google.com/support/guides/firebase-web

Answer 2

正如其他人提到的那样，您获得的Firebase（3及更高版本）的最新版本与Firebase构造函数docs here不兼容。您收到的是因为您在package.json添加了firebase: "*"

您应该按照其他建议进行初始化，然后再进行任何使用firebase的工作。这可能是某种全局的，或者在某些配置块（角度）中。初始化后，您可以使用

获取数据库引用

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

使用新的Firebase版本，您需要使用兼容的AngularFire版本，因此您需要它高于2（令人困惑的版本控制，我知道），您可以在GitHub page找到文档。

在您的package.json或bower.json中根本没有看到AngularFire，但如果您使用的是Firebase 3.x.x，那么您将需要AngularFire 2.x.x

Answer 3

"firebase": "*"中的

package.json将安装与firebase ^3.1.0不兼容的最新firebase 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>

您可以通过创建新项目在https://console.firebase.google.com/中自动生成上面的配置。

Answer 4

以下任一配置都可以为您提供帮助。

1）您可以在index.html

的脚本标记中包含以下内容

SRC =＆＃34; HTTPS：//www.gstatic.com/firebasejs/3.1.0/firebase.js"

2）或者您可以在app.module.ts

中包含以下内容

从＆＃34; firebase＆＃34;中导入*作为firebase;

第二种语法更好，因为您没有对任何版本信息进行硬编码。

Answer 5

转到firebase项目/应用控制台。 Firebase app console
点击“将Firebase添加到您的网络应用”
然后你会得到一些剧本。 Firebase initialization script 在使用Firebase之前，将它们添加到项目脚本中。

就是这样。

Answer 6

对于托管项目，要注意的是本地脚本文件是在Firebase之前加载的。为防止这种情况，只需将它们“延迟”加载，如下所示：

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

感谢post的Paul De Jong！

Firebase没有定义？

6 个答案: