Adding Firebase and Angular fire to an Ionic project.

This is meant as a reference for installing firebase into a New Ionic/Angular project.

Dependancies:

The two main depandancies needed to work with firebase are the firebase package itself and angularfire for other operations.

npm install angularfire2 firebase

Both have their pros and cons, you will prefer one over the other with time after using both together for a bit.

Configuration and setup :

In order for our mobile apps to work with firebase they will need some configuration variables. These variables are provided by firebase console and simply specify the name of the project, the url and apiKey among others.

In your project create a new folder called enviroments and a new file called enviroments.ts inside it.

This file will be where we store the firebase config. You can store it whereever you like but care must be taken that the config file is kept closed source away from the public as it allows access to the different firebase services.

The last step is to setup the either Angular Fire or firebase in the app itself.

This can be done in the app.module for angularfire and anywhere for firebase.

AngularFire:

Firebase:

In the provider using the firebase package, or in the app.module firebase will need to be initialized with:

firebase.initializeApp(firebaseConfig);

Where firebaseConfig is a JSON variable of text like above. Without initializing firebase an error will throw.

Thats it! Now firebase is wired up with your Ionic app and is ready to implement any firebase features like signin or database you need.