如何将environment.ts传入Angular库模块的Firebase初始化配置？

问题背景 #

我在Angular单体仓库中，希望将Firebase模块复用至各个项目，每个项目使用自身的environment配置，避免重复复制模块代码。原模块代码如下：

import { environment } from '../environments/environment';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig))
  ]
})
export class AngularFirebaseV7Module { }

该模块使用Angular Firebase V7新API。我尝试将其迁移至Angular库中，通过AngularFirebaseV7Module.forRoot(environment.firebaseConfig)传入项目的配置，但当前实现中无法在provideFirebaseApp里使用传入的config：

import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';

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

// 需要移除的硬编码导入
import { environment } from '../environments/environment';

interface IFirebaseConfig {
    apiKey: string
    authDomain: string
    projectId: string
    storageBucket: string
    messagingSenderId: string
    appId: string
    measurementId: string
}

export const FIREBASE_CONFIG = new InjectionToken<IFirebaseConfig>('FIREBASE_CONFIG');

@NgModule({
  declarations: [],
  imports: [
    provideFirebaseApp(() => {
      // 希望替换为传入的config，而非硬编码的environment
      return initializeApp(environment.firebaseConfig)
    })
  ]
})
export class AngularFirebaseV7Module {

  static forRoot(config: IFirebaseConfig): ModuleWithProviders<AngularFirebaseV7Module> {
    console.log(config) // 此处可访问config，但无法在imports中直接使用
    return {
      ngModule: AngularFirebaseV7Module,
      providers: [
        {
          provide:  FIREBASE_CONFIG,
          useValue: config
        }
      ]
    };
  }

}

请问如何在provideFirebaseApp(() => initializeApp(config))中使用传入的config？

解决方法 #

核心思路是不在模块类的@NgModule装饰器中硬编码provideFirebaseApp，而是在forRoot方法中动态创建并传入配置——因为forRoot可以返回包含imports的模块配置对象，直接将项目传入的配置注入Firebase初始化逻辑中。

修改后的完整代码：

import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';

interface IFirebaseConfig {
    apiKey: string;
    authDomain: string;
    projectId: string;
    storageBucket: string;
    messagingSenderId: string;
    appId: string;
    measurementId: string;
}

export const FIREBASE_CONFIG = new InjectionToken<IFirebaseConfig>('FIREBASE_CONFIG');

@NgModule({
  declarations: [],
  imports: [] // 清空此处的硬编码Firebase配置
})
export class AngularFirebaseV7Module {
  static forRoot(config: IFirebaseConfig): ModuleWithProviders<AngularFirebaseV7Module> {
    return {
      ngModule: AngularFirebaseV7Module,
      // 在forRoot中动态创建Firebase配置，直接使用传入的config
      imports: [
        provideFirebaseApp(() => initializeApp(config))
      ],
      providers: [
        { provide: FIREBASE_CONFIG, useValue: config }
      ]
    };
  }
}

关键说明 #

1. 彻底解耦环境配置：移除了模块中对environment的硬编码导入，库不再依赖特定项目的环境文件
2. 动态注入配置：将provideFirebaseApp的初始化逻辑移至forRoot方法，直接使用项目传入的config参数完成Firebase初始化
3. 保留扩展能力：保留FIREBASE_CONFIG注入令牌，方便库内其他服务（如Auth、Firestore等）后续获取配置

项目侧使用示例：

import { environment } from '../environments/environment';
import { AngularFirebaseV7Module } from 'your-library-name';

@NgModule({
  imports: [
    AngularFirebaseV7Module.forRoot(environment.firebaseConfig)
  ]
})
export class AppModule { }

这样每个项目就能传入自身的Firebase配置，实现模块复用且无需重复复制代码。

内容的提问来源于stack exchange，提问作者Andrew Allen