or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ai.mdanalytics.mdapp-check.mdauth-guard.mdauthentication.mddata-connect.mddatabase.mdfirebase-app.mdfirestore.mdfunctions.mdindex.mdmessaging.mdperformance.mdremote-config.mdstorage.mdvertexai.md
tile.json

firebase-app.mddocs/

Firebase App

Firebase App is the core foundation for all Firebase services in Angular applications. It initializes Firebase configuration and provides the base application instance that other Firebase services depend on.

Capabilities

Standalone Provider

Modern Angular standalone API for providing Firebase App instances.

/**
 * Provides Firebase App instance using standalone API
 * @param fn - Function that returns initialized Firebase app
 * @returns Environment providers for dependency injection
 */
export function provideFirebaseApp(
  fn: () => FirebaseApp
): EnvironmentProviders;

/**
 * Initialize Firebase app with configuration
 * @param options - Firebase configuration object
 * @param name - Optional app name for multiple apps
 * @returns Initialized Firebase app instance
 */
export function initializeApp(
  options: FirebaseOptions,
  name?: string
): FirebaseApp;

NgModule Provider

Traditional NgModule API for providing Firebase App instances.

/**
 * Firebase App NgModule for traditional module-based setup
 */
export class FirebaseAppModule {
  /**
   * Configure Firebase App for root module
   * @param options - Firebase configuration object
   * @param name - Optional app name
   * @returns ModuleWithProviders for root module
   */
  static forRoot(
    options: FirebaseOptions,
    name?: string
  ): ModuleWithProviders<FirebaseAppModule>;
}

Angular Services

Injectable services for accessing Firebase App instances in Angular components.

/**
 * Injectable service providing access to Firebase App instance
 */
export class FirebaseApp extends FirebaseApp {
  readonly name: string;
  readonly options: FirebaseOptions;
}

/**
 * Collection of all Firebase App instances
 */
export class FirebaseApps extends Array<FirebaseApp> {}

/**
 * Observable stream of Firebase App instances
 */
export const firebaseApp$: Observable<FirebaseApp>;

Injection Tokens

/**
 * Injection token for provided Firebase App instances
 */
export const PROVIDED_FIREBASE_APPS: InjectionToken<FirebaseApp[]>;

Firebase Configuration Functions

Core Firebase initialization functions (re-exported from Firebase SDK).

/**
 * Get Firebase app instance by name
 * @param name - App name, defaults to '[DEFAULT]'
 * @returns Firebase app instance
 */
export function getApp(name?: string): FirebaseApp;

/**
 * Get all initialized Firebase apps
 * @returns Array of all Firebase app instances
 */
export function getApps(): FirebaseApp[];

/**
 * Delete Firebase app instance
 * @param app - Firebase app to delete
 * @returns Promise that resolves when app is deleted
 */
export function deleteApp(app: FirebaseApp): Promise<void>;

Types

/**
 * Firebase configuration options
 */
interface FirebaseOptions {
  /** Firebase API key */
  apiKey?: string;
  /** Authentication domain */
  authDomain?: string;
  /** Database URL for Realtime Database */
  databaseURL?: string;
  /** Firebase project ID */
  projectId?: string;
  /** Cloud Storage bucket */
  storageBucket?: string;
  /** Cloud Messaging sender ID */
  messagingSenderId?: string;
  /** Firebase app ID */
  appId?: string;
  /** Google Analytics measurement ID */
  measurementId?: string;
}

/**
 * Firebase app instance interface
 */
interface FirebaseApp {
  /** App name */
  readonly name: string;
  /** App configuration options */
  readonly options: FirebaseOptions;
}

/**
 * Module with providers type for NgModule configuration
 */
interface ModuleWithProviders<T> {
  ngModule: Type<T>;
  providers?: Provider[];
}

/**
 * Environment providers type for standalone API
 */
type EnvironmentProviders = Provider[];

Usage Examples

Basic Standalone Setup

import { bootstrapApplication } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "your-app-id"
};

bootstrapApplication(AppComponent, {
  providers: [
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    // Other providers...
  ],
});

Multiple Firebase Apps

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

bootstrapApplication(AppComponent, {
  providers: [
    // Default app
    provideFirebaseApp(() => initializeApp(primaryConfig)),
    // Secondary app
    provideFirebaseApp(() => initializeApp(secondaryConfig, "secondary")),
  ],
});

Using Firebase App in Components

import { Component, inject } from '@angular/core';
import { FirebaseApp } from '@angular/fire/app';

@Component({
  selector: 'app-example',
  template: `<p>App Name: {{ app.name }}</p>`,
})
export class ExampleComponent {
  app = inject(FirebaseApp);

  ngOnInit() {
    console.log('Firebase app initialized:', this.app.name);
    console.log('Project ID:', this.app.options.projectId);
  }
}

NgModule Setup

import { NgModule } from '@angular/core';
import { FirebaseAppModule, initializeApp } from '@angular/fire/app';

const firebaseConfig = {
  // Your config
};

@NgModule({
  imports: [
    FirebaseAppModule.forRoot(firebaseConfig),
  ],
  // Other module configuration...
})
export class AppModule {}