Very very lightweight library that helps with using [Firebase SDK](https://www.npmjs.com/package/firebase) in an Angular project.
npm install ng-firebase-liteFirebaseApp 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 (!).
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();
};
});
}
``