how to set up firebase with ionic 2 / angular 2 and typescript

Making transition from ionic 1 to ionic 2 and was curious about how to set up something like firebase import * as Firebase from 'somewhere/foo/'; using their typescript example.

  1. Is bower the standard way of installing js dependencies in in ionic
    2 or should I be using some other build chain/tool for adding
    something like Firebase?

  2. Should I use bower install to install the firebase libraries or
    should point directly to a firebase cdn script source?

  3. Should I using typings to install firebase typescript definitions?

This is the old code from the firebase tutorial


<!-- AngularFire -->
<script src=""></script>


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

which just includes cdn references to the Firebase library. How would we do this in ionic 2 and typescript

Leave a Reply

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

There is no bootstrap in ionic2 apps… you can load up the npm modules for angularfire2 and firebase set the providers on the app component specify your 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]') ], 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… Read more »


You need to configure both Firebase and Angularfire2 into your SystemJS configuration: 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' } }, }); This way you will be able to AngularFire2. The first thing then is to specify the Angularfire2 providers when bootstrapping your application: (...) import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2'; bootstrap(AppComponent, [ FIREBASE_PROVIDERS, defaultFirebase('https://<your-firebase>'), (...) ]); You can then inject the AngularFire class: (...) import {AngularFire} from 'angularfire2'; @Component({ (...) }) export class AppComponent { constructor(private af: AngularFire) { } }