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:

$3

``bash
npm install ng-firebase-lite firebase --save
`

$3

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.

`ts
import { FirebaseOptions } from "firebase/app";

export const environment = {
production: false,
firebase: {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: ''
} as FirebaseOptions
};
`

$3


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

`ts
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.

$3

Auth
`ts
...
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
`ts
@Injectable()
export class StorageService {

private readonly db: Firestore;

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

getItems(): Observable {
const resultStream = new Subject();

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) => {
resultStream.subscribe(observer);

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