@ngx-firebase

A lightweight, drop-in, and zoneless-friendly wrapper around the native Firebase JS SDK for Angular 22+.

This library serves as a modern, boilerplate-free alternative to @angular/fire, providing native Angular Dependency Injection (DI) class tokens and reactive RxJS wrappers around standard Firebase listeners.

⚡ Features

• 📦 Zero overhead: Communicates directly with the Firebase JS SDK without complex wrappers.
• 💉 Native Angular DI: Standard provider functions (provideFirestore, provideAuth, etc.) compatible with Angular's ApplicationConfig.
• 🎭 RxJS Wrappers: Lightweight, memory-leak-safe wrappers for common tasks (docData, collectionSnapshots, user).
• ⏱️ Zoneless Friendly: Uses native SDK snapshot listeners wrapped in RxJS observable streams.
• 📊 Screen Tracking: Custom built-in ScreenTrackingService for automated Google Analytics route tracking.

📦 Installation

Install both the library and the native Firebase SDK:

npm install ngx-firebase firebase

🚀 Quick Start

1. Configure Providers

Register the Firebase services in your app.config.ts using the functional providers:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { 
  provideFirebaseApp, 
  provideAuth, 
  provideFirestore 
} from 'ngx-firebase';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    
    // Initialize Firebase App
    provideFirebaseApp(() => initializeApp({
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID",
      measurementId: "YOUR_MEASUREMENT_ID"
    })),
    
    // Provide Firestore & Auth
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth())
  ]
};

2. Using Services in Standalone Components

Inject the native Firebase instances directly using the provided tokens, and use the RxJS helpers:

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Firestore, doc } from 'firebase/firestore';
import { docData } from 'ngx-firebase';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-store-detail',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div *ngIf="store$ | async as store">
      <h1>{{ store.name }}</h1>
      <p>{{ store.description }}</p>
    </div>
  `
})
export class StoreDetailComponent {
  private firestore = inject(Firestore);
  store$: Observable<any>;

  constructor() {
    // Reference a document using the native Firestore SDK
    const storeRef = doc(this.firestore, 'stores/store_123');
    
    // Wrap it reactively using docData
    this.store$ = docData(storeRef);
  }
}

3. Track Route Page Views Automatically (Google Analytics)

To enable automatic page view tracking, register provideAnalytics and inject ScreenTrackingService in your client config:

import { ApplicationConfig, provideEnvironmentInitializer, inject } from '@angular/core';
import { getAnalytics } from 'firebase/analytics';
import { provideAnalytics, ScreenTrackingService } from 'ngx-firebase';

export const clientConfig: ApplicationConfig = {
  providers: [
    provideAnalytics(() => getAnalytics()),
    ScreenTrackingService,
    provideEnvironmentInitializer(() => {
      // Force service initialization to listen to router events
      inject(ScreenTrackingService);
    })
  ]
};

📄 License

MIT © 2026 Sebas (quedicesebas)