Wie man Firebase mit ionic 2/angular 2 und Typoskript einrichtet

Question

Der Übergang von ionischen 1 zu ionischen 2 und war neugierig darauf, wie Firebase import * as Firebase from 'somewhere/foo/'; mit ihrem Typoskript Beispiel einrichten.

1. Ist Bower den normalen Weges von in ionischen 2 js Abhängigkeiten bei der Installation oder soll ich ein anderes Build-Kette/Werkzeug für das Hinzufügen von so etwas wie Firebase verwenden?

2. Sollte ich Bower installieren, um die Firebase-Bibliotheken zu installieren oder sollte direkt auf eine Firebase CDN-Skriptquelle verweisen?

3. Sollte ich typings verwenden, um Firebase-Typoskript-Definitionen zu installieren?

Dies ist der alte Code aus dem Feuerbasis Tutorial https://www.firebase.com/docs/web/libraries/ionic/guide.html

index.html

<!-- AngularFire --> 
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script> 

app.js

angular.module("starter", ["ionic", "firebase"]) 

, die nur CDN Verweise auf das umfasst Firebase-Bibliothek Wie würden wir dies in ionischen 2 und Typoskript tun

Answer 1

Es gibt keine Bootstrap in ionic2 apps .. .

• Sie können die npm-Module für angularfire2 und 0 laden
• setzen die Anbieter auf der App-Komponente
• App URL

app.ts

import 'es6-shim'; 
import {App, Platform} from 'ionic-angular'; 
import {StatusBar} from 'ionic-native'; 
import {HomePage} from './pages/home/home'; 


import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2'; 

@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    providers: [ 
     FIREBASE_PROVIDERS, 
     defaultFirebase('https://[YOUR-APP].firebaseio.com/') 
    ], 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
export class MyApp { 
    rootPage: any = HomePage; 

    constructor(platform: Platform) { 
     platform.ready().then(() => { 
      // Okay, so the platform is ready and our plugins are available. 
      // Here you can do any higher level native things you might need. 
      StatusBar.styleDefault(); 
     }); 
    } 
} 

nach Hause geben.ts

import {Page} from 'ionic-angular'; 
import {Component} from 'angular2/core'; 
import {AngularFire} from 'angularfire2'; 
import {Observable} from 'rxjs/Observable'; 

@Page({ 
    template: ` 
     <ion-navbar *navbar> 
      <ion-title> 
       Home 
      </ion-title> 
     </ion-navbar> 

     <ion-content class="home"> 
      <ion-card *ngFor="#item of bookItems | async"> 
       <ion-card-header> 
        {{item.volumeInfo.title}} 
       </ion-card-header> 
       <ion-card-content> 
        {{item.volumeInfo.description}} 
       </ion-card-content> 
      </ion-card> 
     </ion-content>` 
}) 
export class HomePage { 
    bookItems: Observable<any[]>; 
    constructor(af: AngularFire) { 
     this.bookItems = af.list('/bookItems'); 
    } 
} 

vollständige Quelle in git Repo - aaronksaunders/ionic2-angularfire-sample

Sie für die Authentifizierung Veranstaltungen wie diese hören

ngOnInit() { 

    // subscribe to the auth object to check for the login status 
    // of the user, if logged in, save some user information and 
    // execute the firebase query... 
    // .. otherwise 
    // show the login modal page 
    this.auth.subscribe((data) => { 
     console.log("in auth subscribe", data) 
     if (data) { 
      this.authInfo = data.password 
      this.bookItems = this.af.list('/bookItems'); 
     } else { 
      this.authInfo = null 
      this.displayLoginModal() 
     } 
    }) 
} 

See Code Here

Answer 2

Sie müssen sowohl Firebase und Angularfire2 in Ihre SystemJS Konfiguration konfigurieren:

System.config({ 
    map: { 
    firebase: '/node_modules/firebase/lib/firebase-web.js', 
    angularfire2: ' node_modules/angularfire2' 
    }, 
    packages: {  
    angularfire2: { 
     main: 'angularfire2.js', 
     defaultExtension: 'js' 
    },app: { 
     format: 'register', 
     defaultExtension: 'js' 
    } 
    }, 
}); 

Auf diese Weise sind Sie in der Lage sein, AngularFire2.

Das erste, was dann ist die Angularfire2 Anbieter angeben, wenn Ihre Anwendung Bootstrapping:

(...) 
import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2'; 

bootstrap(AppComponent, [ 
    FIREBASE_PROVIDERS, 
    defaultFirebase('https://<your-firebase>.firebaseio.com'), 
    (...) 
]); 

Sie dann die AngularFire Klasse injizieren:

(...) 
import {AngularFire} from 'angularfire2'; 

@Component({ 
    (...) 
}) 
export class AppComponent { 
    constructor(private af: AngularFire) { 

    } 
}