AngularFire Lite

lightweight wrapper to use Firebase API with Angular.

Features	AngularFire Lite	AngularFire2
Authentication	✔️	✔️
Firestore	✔️	✔️
Storage	✔️	✔️
Realtime Database	✔️	✔️
Cloud Messaging	✔️	❌
Server Side Rendering	✔️	➕ ➖
State Transfer	✔️	❌
Transactions and Batched Writes	✔️ Observable Based	❌
NPM Package Size	84 KB ⚡	124 KB 🐢

Finally SSR with Firebase!

Angularfire Lite is the very first angular library to support server side rendering with firebase.

📁 Supports Both Firebase Databases: Firestore & Realtime Database
🎉 No Flickering whatsoever when the app bootstraps
⚡ Better performance
🔍 Search engine optimization
☺️ Easy implementation

Getting Started

Reminder: don't forget to install nodejs first.

 
npm install --save angularfire-lite firebase

How?:

Create a firebase account and login to your dashboard
Click on 'Add Firebase to your web app' icon and copy the config object
Add it to environment.ts & environment.prod.ts located under /src/environments/

export const environment = {
  production: false, // production: true => in `enviroment.prod.ts`
  config: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

How?:

Import the config object we created from enviroment.ts
Import AngularFireLite and pass it the config object

import { AngularFireLite } from 'angularfire-lite';
import {environment} from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireLite.forRoot(environment.config)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Observable based: Every function returns an Observable that you should subscribe to it to get back the data.
Simple API: AngularFire Lite has a simple straight forward syntax similar to the native Firebase API plus some simple additions.