Polymerfire <firebase-app> stürzt ab app

Question

Ich habe gerade the new Polymerfire <firebase-app> element zu meinem (Polymer 1.x + Firebase 3.x) Projekt hinzugefügt und das Projekt abgestürzt. Ich habe erwartet, dass der Home-Bildschirm auf localhost geladen wird, aber stattdessen bekomme ich nur einen leeren Bildschirm und einen Konsolenfehler.

my-element.html

<firebase-app auth-domain="my-app-id.firebaseapp.com" 
       database-url="https://my-app-id.firebaseio.com/" 
       api-key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"> 
</firebase-app> 

Das Konsolenprotokoll meldet den folgenden Fehler:

console.log

firebase-app.html:94
Uncaught ReferenceError: firebase is not defined

Die entsprechende Code-Zeile (Linie 94) ist die folgende:

firebase-app.html, Zeile 94

firebase.initializeApp.apply(firebase, init); // Line 94, highlighted error 

The entire source code for the firebase-app element is located here.

https://github.com/firebase/polymerfire/blob/master/firebase-app.html

<!-- 
@license 
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by a BSD-style 
license that can be found in the LICENSE file or at 
https://github.com/firebase/polymerfire/blob/master/LICENSE 
--> 

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="firebase.html"> 
<dom-module id="firebase-app"> 
    <script> 
    (function() { 
     'use strict'; 
     /** 
     * The firebase-app element is used for initializing and configuring your 
     * connection to firebase. 
     */ 
     Polymer({ 
     is: 'firebase-app', 
     properties: { 
      /** 
      * The name of your app. Optional. 
      * 
      * You can use this with the `appName` property of other Polymerfire elements 
      * in order to use multiple firebase configurations on a page at once. 
      * In that case the name is used as a key to lookup the configuration. 
      */ 
      name: { 
      type: String, 
      value: '' 
      }, 
      /** 
      * Your API key. 
      * 
      * Get this from the Auth > Web Setup panel of the new 
      * Firebase Console at https://console.firebase.google.com 
      * 
      * It looks like this: 'AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g' 
      */ 
      apiKey: { 
      type: String 
      }, 
      /** 
      * The domain name to authenticate with. 
      * 
      * The same as your Firebase Hosting subdomain or custom domain. 
      * Available on the Firebase Console. 
      * 
      * For example: 'polymerfire-test.firebaseapp.com' 
      */ 
      authDomain: { 
      type: String 
      }, 
      /** 
      * The URL of your Firebase Realtime Database. You can find this 
      * URL in the Database panel of the Firebase Console. 
      * Available on the Firebase Console. 
      * 
      * For example: 'https://polymerfire-test.firebaseio.com/' 
      */ 
      databaseUrl: { 
      type: String 
      }, 
      /** 
      * The Firebase app object constructed from the other fields of 
      * this element. 
      */ 
      app: { 
      type: Object, 
      notify: true, 
      computed: '__computeApp(name, apiKey, authDomain, databaseUrl)' 
      } 
     }, 
     __computeApp: function(name, apiKey, authDomain, databaseUrl) { 
      if (apiKey && authDomain && databaseUrl) { 
      var init = [{ 
       apiKey: apiKey, 
       authDomain: authDomain, 
       databaseURL: databaseUrl 
      }]; 
      if (name) { 
       init.push(name); 
      } 
      firebase.initializeApp.apply(firebase, init); 
      } else { 
      return null; 
      } 
      return firebase.app(name); 
     } 
     }); 
    })(); 
    </script> 
</dom-module> 

Answer 1

Zusammenfassung von Kommentaren: @ Bogdan.Nourescu richtig war. Ich hatte das Firebase-SDK-Verzeichnis nicht korrekt installiert.

Ich hatte die Polymerfire Abhängigkeiten mit Bower mit dem folgenden Befehl zu installieren:

bower install --save firebase/polymerfire 

Hinweis: bower install --save polymerfire Punkte DivShot-Version, die jetzt veraltet ist.