angularfirebasedependency-injectionangularfireinjection-tokens

Angular 16: I can't pass a received configuration object in Angular forRoot method inside my angular Library


I have this base code in my library created in Angular 16, but I can't get the config object received in my static forRoot method:

import { NgModule, ModuleWithProviders, Inject, Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

import { IsFeatureEnabledDirective } from './directives/is-feature-enabled.directive';
import { ConfigFirebase } from './interfaces/config-firebase.interface';
import { FeatureFlagsService } from './services/feature-flags.service';
import { BASE, FIREBASE_CONFIG, CONSTRAINTS } from './constants/tokens';

@NgModule({
  declarations: [
    IsFeatureEnabledDirective,
  ],
  imports: [
    HttpClientModule,
    AngularFireModule.initializeApp({}), // <---- can't pass here my config object
    AngularFirestoreModule,
  ],
  exports: [
    IsFeatureEnabledDirective,
  ]
})
export class FeatureFlagsModule {
  constructor(private featureFlagService: FeatureFlagsService) { }

  static forRoot(
    config: ConfigFirebase,
    options: { base: string, identity?: {} }): ModuleWithProviders<FeatureFlagsModule> {

    return {
      ngModule: FeatureFlagsModule,
      providers: [
        {
          provide: FIREBASE_CONFIG,
          useValue: config // <--- Here my object exists (I've checked it)
        },
        {
          provide: BASE,
          useValue: options.base
        },
        {
          provide: CONSTRAINTS,
          useValue: options.identity,
        },
      ],
    };
  }
}

I have tried with:

Do you have any other idea?


Solution

  • Remove the initializeApp and just import the module.

    @NgModule({
      declarations: [
        IsFeatureEnabledDirective,
      ],
      imports: [
        HttpClientModule,
        AngularFireModule, // .initializeApp({}), // <- changed here!
        AngularFirestoreModule,
      ],
      exports: [
        IsFeatureEnabledDirective,
      ]
    })
    

    Then add the options into the providers array like so.

    ...
    export class FeatureFlagsModule {
      constructor(private featureFlagService: FeatureFlagsService) { }
    
      static forRoot(
        config: ConfigFirebase,
        options: { base: string, identity?: {} }): ModuleWithProviders<FeatureFlagsModule> {
    
        return {
          ngModule: FeatureFlagsModule,
          providers: [
            {
              provide: FIREBASE_OPTIONS,
              useValue: config // <--- Here my object exists (I've checked it)
            },
            {
              provide: BASE,
              useValue: options.base
            },
            {
              provide: CONSTRAINTS,
              useValue: options.identity,
            },
          ],
        };
      }
    }
    

    You can check the source code for the same on firebase.app.module.ts - Github