Ionic2 with AngularFire2

Last updated Friday 7 October, 2016

Setting up an Ionic2 app to connect to Firebase using AngularFire2 is currently a great pain in the a**. There are type issues and you have to live with some warnings but at least it works.

This post goes through setting up the dev environment, creating a new Ionic2 project, fixing an Ionic2 build error, installing AngularFire2, fixing the AngularFire2 errors, and finally listing items from Firebase.

The app created is an Ionic app using the v2.0.0 Release Candidate. This means the app uses Angular2 Final release, which has quite a different modular structure compared to earlier versions of Angular2 or Ionic2.

If you would rather jump straight to the final project code, you can find it on GitHub here. The project’s ReadMe explains the parts you need to change to get the project running for your own Firebase database.

The Environment

Ensure you’re running the most recent version of node, v6.6.0 at time of writing. You can install it from here.

You also need some globally installed npm modules to start with. Ensure Ionic, TypeScript and Cordova use the versions listed below.

npm install -g ionic@2.1.0
npm install -g typescript@2.0.3
npm install -g cordova@6.3.1

The npm warnings during installation can be safely ignored. Any errors however will need to be resolved.

The Project

Create a new Ionic V2 project using the ionic command line tool. It will be a tabs-based project by default and will use the most recent version of Ionic2.

ionic start -v2 my-awesome-project

At this point the app should run as a normal Ionic app.

cd my-awesome-project
ionic serve

To stop your app running, press Ctrl + C in the command line.

Fix Serve Issue

I personally encountered an issue where ‘ionic serve’ would succeed the first time but fail on subsequent rebuilds as changes were made.

The release candidate version of Ionic2 has a different source folder / build folder structure than Ionic1 but the CLI does not yet reflect this change. The watch script sees changes in the www build folder and so keeps rebuilding forever, recursively producing copies of the project under www.

To resolve this, add a watch pattern to ionic.config.json which excludes the www folder (the build output folder) from the watch script.

Here is the full ionic.config.json file, with the watch pattern added.

Lines 6–8 were added to the file.

Install and Connect AngularFire2

Setting up AngularFire2 is actually really easy. The problems with this setup come from the Firebase module, which AngularFire2 uses behind the scenes.

First install AngularFire2 using npm:

npm install --save angularfire2

Now import the AngularFireModule into your App module, add your Firebase settings and initialise AngularFire.

Here is the full app.module.ts which is located at src/app/app.module.ts:

Line 8: Add an import for AngularFireModule
Lines 10–16: Add your Firebase config (select a project in your Firebase Console then click “Add Firebase to your web app” to find this)
Line 28: Initialise AngularFire2 using your config

If you try to serve your app you should get some errors regarding the functions that firebase exports (or doesn’t…)

Fixing the Firebase Errors

The solution for these errors is to explicitly specify the functions that the firebase module exports. We can do this by customising the rollup configuration. Rollup is used to bundle your source app files into a version for use in the browser.

Create a file called rollup.config.js in the root of your project, alongside your other configs. This file will be used in place of the rollup config file that Ionic provides.

If you’re interested, the original file this one is modified from is located at node_modules/@ionic/app-scripts/config/rollup.config.js

Here’s the full script to save as rollup.config.js:

The lines modified from the original Ionic script were:

• Line 34: Added useStrict: false
• Lines 42–49: Passed a config object to commonjs, specifying the functions that Firebase exports. It does currently export these, but in an incompatible format, causing the errors we see.

Now we need to tell our app to use this new config. We can do this by adding it to the project’s package.json.

Here is the full package.json, located in the root of your project:

Lines 36–38: Added config options directing ionic_rollup to our config.

At this point your app should run without errors (but will still have warnings about using “eval”, nothing we can do about that one!)

Loading Data from Firebase

Now we’re connected to Firebase and the last step is to load some data. For this step you will need a database configured with a group of objects.

My data looks like this, you will need to customise the code that follows to match your own data structure:

A database with a group called “words” containing a list of words and their translations.

Here is some code to load a list of words into the home page. We need to import AngularFire and then load our data. AngularFire uses Observables for their data lists by default.

Here is the full code for home.ts located at src/pages/home/home.ts:

Line 5: Import AngularFire and its ListObservable
Line 13: Set up a variable to store the data
Line 15: Pass AngularFire to the constructor
Line 16: Load a list of objects using the data group’s path in the database

And to display the data once it’s loaded, you will need an Ionic list which is linked up to the variable storing the data.

Here is the code for home.html located at src/pages/home/home.html:

Lines 9–13: Replaced the default contents of the ion-content element with an ion-list linked to the words variable defined in home.ts.

Line 10: The async pipe is very important as it allows our list to bind to an Observable, then automatically update when new data arrives.

Line 11: Ensure you’re accessing a property which exists in your data set.

That’s it!

You should now have a working Ionic2 project which loads data from a Firebase database using an AngularFire2 ObservableList.

If you find any errors and would like to contribute a solution (especially if any package versions change) you can find me on Twitter as @tanya.