Putting it All Together: Ionic 2, AngularFire 2, and Firebase 3

ionic start example-ionic blank --v2

cd example-ionicnpm install angularfire2 firebase —save

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';

import {
    defaultFirebase,
    FIREBASE_PROVIDERS
} from 'angularfire2';

const COMMON_CONFIG = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_FIREBASE.firebaseapp.com",
    databaseURL: "https://YOUR_FIREBASE.firebaseio.com",
    storageBucket: "YOUR_FIREBASE.appspot.com"
};

@Component({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
    providers: [
        FIREBASE_PROVIDERS,
        defaultFirebase(COMMON_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();
        });
    }
}
ionicBootstrap(MyApp);

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

import {
    AngularFire,
    FirebaseObjectObservable
} from 'angularfire2';

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    item: FirebaseObjectObservable<any>;

    constructor(private navCtrl: NavController, af: AngularFire) {
        this.item = af.database.object('/item');
    }
}

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    The world is your oyster.
        <p>
            {{ (item | async)?.name }}
        </p>
</ion-content>

ionic serve