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.
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;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>;
}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 token for provided Firebase App instances
*/
export const PROVIDED_FIREBASE_APPS: InjectionToken<FirebaseApp[]>;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>;/**
* 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[];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...
],
});import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
bootstrapApplication(AppComponent, {
providers: [
// Default app
provideFirebaseApp(() => initializeApp(primaryConfig)),
// Secondary app
provideFirebaseApp(() => initializeApp(secondaryConfig, "secondary")),
],
});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);
}
}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 {}