AngularFire: No Provider for Firebase Options Error Using APP_INITIALIZER with AWS Secrets Manager

Question

I'm trying to initialize Firebase in my Angular application by fetching the Firebase config from AWS Secrets Manager before the application starts. I've set up the initialization using APP_INITIALIZER and AngularFireModule, but I'm facing an issue when injecting AngularFireDatabase in a component.

What I'm Doing Fetching Firebase Config from AWS Secrets Manager:

Using SecretsManagerClient to fetch the Firebase config. Initializing Firebase with APP_INITIALIZER:

Using APP_INITIALIZER to ensure the configuration is fetched before initializing the app. Injecting AngularFireDatabase in a Component:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GetSecretValueCommand, SecretsManagerClient } from '@aws-sdk/client-secrets-manager';
import { ToastrModule } from 'ngx-toastr';
import { TestingComponent } from './testing/testing.component';

function fetchFirebaseConfig(): Promise<any> {
    const client = new SecretsManagerClient({
        region: 'eu-north-1',
        credentials: {
            accessKeyId: '', // Replace with actual Access Key ID
            secretAccessKey: '' // Replace with actual Secret Access Key
        }
    });

    const command = new GetSecretValueCommand({
        SecretId: 'firebase_dummy',
        VersionStage: 'AWSCURRENT'
    });

    return client.send(command)
        .then(res => JSON.parse(res.SecretString))
        .catch(err => {
            console.error('Error fetching Firebase Config:', err);
            throw err; // Re-throw to prevent app initialization
        });
}

export function initializeFirebaseApp(): () => Promise<void> {
    return () => fetchFirebaseConfig().then(config => {
        AngularFireModule.initializeApp(config);
    });
}

@NgModule({
    declarations: [
        TestingComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AngularFireDatabaseModule,
        ToastrModule.forRoot({
            timeOut: 3500,
            preventDuplicates: true
        })
    ],
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: initializeFirebaseApp,
            multi: true
        }
    ],
    bootstrap: [TestingComponent]
})
export class AppModule { }





import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.scss']
})
export class TestingComponent implements OnInit {

  constructor(private db: AngularFireDatabase) { 
    console.log('test')
  }

  ngOnInit(): void {
  }
}

Trying to use AngularFireDatabase after initializing AngularFireModule.

I'm trying to initialize Firebase in my Angular application by fetching the Firebase config from AWS Secrets Manager before the application starts. I've set up the initialization using APP_INITIALIZER and AngularFireModule, but I'm facing an issue when injecting AngularFireDatabase in a component.

What I'm Doing Fetching Firebase Config from AWS Secrets Manager:

Using SecretsManagerClient to fetch the Firebase config. Initializing Firebase with APP_INITIALIZER:

Using APP_INITIALIZER to ensure the configuration is fetched before initializing the app. Injecting AngularFireDatabase in a Component:

Trying to use AngularFireDatabase after initializing AngularFireModule.