ng-firebase-lite

Very very lightweight library that helps with using Firebase SDK in an Angular project.

How is it different from angularfire2 or angularfire-lite?

Those libraries are much bigger and wrap all or most API's from Firebase SDK. This library, on the other hand, doesn't attempt to wrap all the API's, but just provides a convinient way to access Firebase SDK by injecting FirebaseApp anywhere in your app.

Here are some of the reasons why you might consider using this library:

• Bundle size. As mentioned above, this library doesn't add much on top of Firebase SDK, so the footprint is tiny.
• Program closer to the official API of Firebase SDK. This is convinient because all the examples in the official docs for Firebase (at https://firebase.google.com/docs) as well as StackOverflow answers will be directly applicable (as opposed to having to find the analogous API's in the docs of the wrapper libraries).
• Consistency between client-side and server-side code. For example, to access Firebase from Cloud Functions you would need to use Firebase Admin Node.js SDK, which has the same or similar API as Firebase SDK.
• Less code = less complexity = less bugs. Consider the issue list for angularfire2. Also consider that angularfire2 hasn't had a stable release yet and is in RC stage for almost a year now (!).

Installation & Setup

The installation and setup instructions are very similar to angularfire2:

1. Install ng-firebase-lite and firebase

npm install ng-firebase-lite firebase --save

2. Add Firebase config to environments variable

Open /src/environments/environment.ts and add your Firebase configuration. You can find your project configuration in the Firebase Console. From the project overview page, click Add Firebase to your web app.

import { FirebaseOptions } from "firebase/app";

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  } as FirebaseOptions
};

3. Setup @NgModule for the FirebaseAppModule

Open /src/app/app.module.ts, inject the Firebase providers, and specify your Firebase configuration.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FirebaseAppModule } from 'ng-firebase-lite';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    FirebaseAppModule.initializeApp(environment.firebase)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Usage

After you've imported FirebaseAppModule in your AppModule as described above, you can now inject FirebaseApp anywhere you want to use the Firebase API.

Examples:

Auth

...
import { firebaseAppToken } from 'ng-firebase-lite';
import { FirebaseApp } from "firebase/app"
import { getAuth, Auth, signInWithRedirect } from 'firebase/auth';
...

@Injectable()
export class AuthService {
  private readonly auth: Auth;

  constructor(@Inject(firebaseAppToken) private fba: FirebaseApp) {
    this.auth = getAuth(fba);

    this.auth.onAuthStateChanged(() => {
      console.log(`onAuthStateChanged. User: ${this.auth.currentUser}`);
    });
  }

  login(provider: auth.AuthProvider): void {
    signInWithRedirect(this.auth, provider).then(() => {
      console.log('Login successful');
    }, err => console.error(err));
  }
}

Firestore

@Injectable()
export class StorageService {

  private readonly db: Firestore;

  constructor(@Inject(firebaseAppToken) private fba: FirebaseApp) {
    this.db = getFirestore(fba);
  }

  getItems(): Observable<Item[]> {
    const resultStream = new Subject<Item[]>();

    let query = collection(doc(collection(this.db, 'users'), this.userId), 'my-collection'));

    let unsubscribeOnSnapshot: () => void = () => {};

    unsubscribeOnSnapshot = onSnapshot(query, snapshot => {
      resultStream.next(snapshot.docs);
    }, error => {
      resultStream.error(error)
    }, () => {
      resultStream.complete();
    });

    return Observable.create((observer: Subscriber<Item[]>) => {
      resultStream.subscribe(observer);

      return () => {
        unsubscribeOnSnapshot();
      };
    });
  }