tessl/npm-angular--fire
Angular + Firebase integration library providing Angular-native services, dependency injection, Zone.js wrappers, Observable-based APIs, and comprehensive Firebase service support.
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-angular--fire@20.0.0index.mddocs/
@angular/fire
@angular/fire is the official Angular library for Firebase, providing seamless integration between Angular applications and Firebase services. It offers Angular-native services with dependency injection, Zone.js wrappers for proper change detection, Observable-based APIs using RxJS, lazy-loading capabilities, and comprehensive support for all major Firebase services.
Package Information
- Package Name: @angular/fire
- Package Type: npm
- Language: TypeScript
- Installation:
npm install @angular/fire firebase
Core Imports
// Core utilities and version info
import { VERSION, LogLevel, setLogLevel } from '@angular/fire';
// Firebase app initialization
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';For compatibility with legacy Firebase v8:
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';Basic Usage
Standalone API (Angular 14+)
import { bootstrapApplication } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
const firebaseConfig = {
// Your Firebase config
};
bootstrapApplication(AppComponent, {
providers: [
provideFirebaseApp(() => initializeApp(firebaseConfig)),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),
],
});NgModule API
import { NgModule } from '@angular/core';
import { FirebaseAppModule, initializeApp } from '@angular/fire/app';
import { AuthModule } from '@angular/fire/auth';
import { FirestoreModule } from '@angular/fire/firestore';
@NgModule({
imports: [
FirebaseAppModule.forRoot(firebaseConfig),
AuthModule,
FirestoreModule,
],
})
export class AppModule {}Service Usage in Components
import { Component, inject } from '@angular/core';
import { Auth, signInWithEmailAndPassword, user } from '@angular/fire/auth';
import { Firestore, collection, addDoc } from '@angular/fire/firestore';
@Component({
selector: 'app-example',
template: `...`,
})
export class ExampleComponent {
private auth = inject(Auth);
private firestore = inject(Firestore);
user$ = user(this.auth);
async signIn(email: string, password: string) {
return signInWithEmailAndPassword(this.auth, email, password);
}
async addData(data: any) {
const collectionRef = collection(this.firestore, 'items');
return addDoc(collectionRef, data);
}
}Architecture
@angular/fire is built around several key architectural patterns:
- Dual Provider System: Both standalone providers (
provideAuth()) and NgModules (AuthModule) for maximum compatibility - Zone Integration: All Firebase operations are automatically wrapped with Angular's Zone.js for proper change detection
- Observable APIs: RxFire integration provides reactive streams for real-time Firebase data
- Lazy Loading: Services are tree-shakable and only load when imported
- Angular DI: Full integration with Angular's dependency injection system
- TypeScript Support: Complete type safety for all Firebase APIs
Core Library
Core Functions
Essential utilities and zone integration for Angular Firebase apps.
// Version information
export const VERSION: Version;
// Logging control
export enum LogLevel {
SILENT = 0,
WARN = 1,
VERBOSE = 2
}
export function setLogLevel(logLevel: LogLevel): void;
// Zone integration utilities
export class ɵZoneScheduler implements SchedulerLike {
constructor(private zone: any, private delegate?: any);
now(): number;
schedule(work: (this: SchedulerAction<any>, state?: any) => void, delay?: number, state?: any): Subscription;
}
export class ɵAngularFireSchedulers {
readonly outsideAngular: ɵZoneScheduler;
readonly insideAngular: ɵZoneScheduler;
}
// Internal utilities for dependency injection
export function ɵgetDefaultInstanceOf<T>(identifier: string, provided: T[] | undefined, defaultApp: FirebaseApp): T | undefined;
export function ɵgetAllInstancesOf<T>(identifier: string, app?: FirebaseApp): T[];
export function ɵzoneWrap<T extends (...args: any[]) => any>(fn: T, skipFirst?: boolean): T;Capabilities
Firebase App
Core Firebase application initialization and configuration. Required foundation for all other Firebase services.
// Standalone provider
export function provideFirebaseApp(
fn: () => FirebaseApp
): EnvironmentProviders;
// Service
export class FirebaseApp extends FirebaseApp {}
export class FirebaseApps extends Array<FirebaseApp> {}
export const firebaseApp$: Observable<FirebaseApp>;Authentication
Comprehensive user authentication with support for email/password, social providers, anonymous auth, and custom authentication flows.
// Standalone provider
export function provideAuth(fn: () => Auth): EnvironmentProviders;
// Core service
export class Auth extends Auth {}
export const authState: (auth: Auth) => Observable<User | null>;
export const user: (auth: Auth) => Observable<User | null>;
export const idToken: (auth: Auth) => Observable<string | null>;
// Key auth functions
export function signInWithEmailAndPassword(
auth: Auth,
email: string,
password: string
): Promise<UserCredential>;
export function createUserWithEmailAndPassword(
auth: Auth,
email: string,
password: string
): Promise<UserCredential>;
export function signOut(auth: Auth): Promise<void>;Firestore
Cloud Firestore NoSQL database with real-time synchronization, offline support, and powerful querying capabilities.
// Standalone provider
export function provideFirestore(fn: () => Firestore): EnvironmentProviders;
// Core service
export class Firestore extends Firestore {}
// Document operations
export function doc(firestore: Firestore, path: string): DocumentReference;
export function setDoc<T>(ref: DocumentReference<T>, data: T): Promise<void>;
export function getDoc<T>(ref: DocumentReference<T>): Promise<DocumentSnapshot<T>>;
export function deleteDoc(ref: DocumentReference): Promise<void>;
// Collection operations
export function collection(firestore: Firestore, path: string): CollectionReference;
export function addDoc<T>(ref: CollectionReference<T>, data: T): Promise<DocumentReference<T>>;
export function getDocs<T>(query: Query<T>): Promise<QuerySnapshot<T>>;
// Real-time observables
export function docData<T>(ref: DocumentReference<T>): Observable<T | undefined>;
export function collectionData<T>(ref: CollectionReference<T> | Query<T>): Observable<T[]>;Realtime Database
Firebase Realtime Database with real-time synchronization and offline capabilities.
// Standalone provider
export function provideDatabase(fn: () => Database): EnvironmentProviders;
// Core service
export class Database extends Database {}
// Database operations
export function ref(database: Database, path?: string): DatabaseReference;
export function set(ref: DatabaseReference, value: any): Promise<void>;
export function update(ref: DatabaseReference, values: object): Promise<void>;
export function remove(ref: DatabaseReference): Promise<void>;
// Real-time observables
export function objectVal<T>(ref: DatabaseReference): Observable<T | null>;
export function listVal<T>(ref: DatabaseReference): Observable<T[]>;Cloud Storage
Firebase Cloud Storage for uploading and serving user-generated content like images, videos, and other files.
// Standalone provider
export function provideStorage(fn: () => Storage): EnvironmentProviders;
// Core service
export class Storage extends Storage {}
// Storage operations
export function ref(storage: Storage, path?: string): StorageReference;
export function uploadBytes(ref: StorageReference, data: Blob | Uint8Array): Promise<UploadResult>;
export function getDownloadURL(ref: StorageReference): Promise<string>;
export function deleteObject(ref: StorageReference): Promise<void>;
// Upload progress observables
export function uploadBytesResumable(
ref: StorageReference,
data: Blob | Uint8Array
): UploadTask;
export function percentage(task: UploadTask): Observable<number>;Analytics
Google Analytics integration with automatic screen tracking and custom event logging.
// Standalone provider
export function provideAnalytics(fn: () => Analytics): EnvironmentProviders;
// Core service
export class Analytics extends Analytics {}
// Analytics functions
export function logEvent(
analytics: Analytics,
eventName: string,
eventParams?: object
): void;
export function setUserId(analytics: Analytics, id: string | null): void;
export function setUserProperties(analytics: Analytics, properties: object): void;Cloud Functions
Call server-side functions directly from your Angular app with automatic serialization and error handling.
// Standalone provider
export function provideFunctions(fn: () => Functions): EnvironmentProviders;
// Core service
export class Functions extends Functions {}
// Functions operations
export function httpsCallable<T = any, R = any>(
functions: Functions,
name: string
): HttpsCallable<T, R>;Cloud Messaging
Firebase Cloud Messaging for push notifications and background messaging.
// Standalone provider
export function provideMessaging(fn: () => Messaging): EnvironmentProviders;
// Core service
export class Messaging extends Messaging {}
// Messaging functions
export function getToken(messaging: Messaging): Promise<string>;
export function onMessage(
messaging: Messaging,
nextOrObserver: (payload: MessagePayload) => void
): Unsubscribe;Performance Monitoring
Monitor your app's performance with automatic and custom performance traces.
// Standalone provider
export function providePerformance(fn: () => Performance): EnvironmentProviders;
// Core service
export class Performance extends Performance {}
// Performance functions
export function trace(performance: Performance, name: string): Trace;Remote Config
Dynamically configure your app's behavior and appearance without requiring an app update.
// Standalone provider
export function provideRemoteConfig(fn: () => RemoteConfig): EnvironmentProviders;
// Core service
export class RemoteConfig extends RemoteConfig {}
// Remote Config functions
export function fetchAndActivate(remoteConfig: RemoteConfig): Promise<boolean>;
export function getValue(remoteConfig: RemoteConfig, key: string): Value;App Check
Protect your app's backend resources from abuse by ensuring requests are coming from authentic instances of your app.
// Standalone provider
export function provideAppCheck(fn: () => AppCheck): EnvironmentProviders;
// Core service
export class AppCheck extends AppCheck {}
// App Check functions
export function getToken(appCheck: AppCheck): Promise<AppCheckToken>;Auth Guard
Angular route guards and utilities for implementing authentication-based routing and access control.
// Auth Guard
export class AuthGuard implements CanActivate {
canActivate(): Observable<boolean>;
}
// Auth pipes
export const loggedIn: AuthPipe;
export const isNotAnonymous: AuthPipe;
export const emailVerified: AuthPipe;
// Helper functions
export function redirectUnauthorizedTo(redirect: any[]): AuthPipe;
export function redirectLoggedInTo(redirect: any[]): AuthPipe;
export function hasCustomClaim(claim: string): AuthPipe;Vertex AI
Google Cloud Vertex AI integration for generative AI capabilities.
// Standalone provider
export function provideVertexAI(fn: () => VertexAI): EnvironmentProviders;
// Core service
export class VertexAI extends VertexAI {}
// Vertex AI functions
export function getGenerativeModel(
vertexAI: VertexAI,
modelParams: ModelParams
): GenerativeModel;Firebase AI
Firebase AI services for machine learning and artificial intelligence features.
// Standalone provider
export function provideAI(fn: () => AI): EnvironmentProviders;
// Core service
export class AI extends AI {}Data Connect
Firebase Data Connect for relational database integration and GraphQL-like queries.
// Standalone provider
export function provideDataConnect(fn: () => DataConnect): EnvironmentProviders;
// Core service
export class DataConnect extends DataConnect {}Core Types
Firebase App Types
interface FirebaseOptions {
apiKey?: string;
authDomain?: string;
projectId?: string;
storageBucket?: string;
messagingSenderId?: string;
appId?: string;
measurementId?: string;
}
interface FirebaseApp {
readonly name: string;
readonly options: FirebaseOptions;
}Common Types
// Angular provider types
type EnvironmentProviders = Provider[];
interface Provider {
provide: any;
useValue?: any;
useFactory?: (...args: any[]) => any;
deps?: any[];
}
interface ModuleWithProviders<T> {
ngModule: Type<T>;
providers?: Provider[];
}
// RxJS types
interface Observable<T> {
subscribe(observer: (value: T) => void): Subscription;
pipe<U>(...operators: any[]): Observable<U>;
}
interface Subscription {
unsubscribe(): void;
}
// Zone scheduler types
interface SchedulerLike {
now(): number;
schedule(work: (this: SchedulerAction<any>, state?: any) => void, delay?: number, state?: any): Subscription;
}
interface SchedulerAction<T> {
schedule(state?: T, delay?: number): Subscription;
execute(state: T, delay?: number): any;
}
// Firebase SDK base types
interface FirebaseError extends Error {
code: string;
message: string;
name: string;
}
type Unsubscribe = () => void;
// Utility types
type Partial<T> = {
[P in keyof T]?: T[P];
};
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;