I have an angular monorepo and I'm looking to reuse a specific module across multiple projects without duplicating it. The challenge is to use the environment specific to each project, rather than copying and pasting the code into each one.
import { environment } from '../environments/environment';
@NgModule({
imports: [
provideFirebaseApp(() => initializeApp(environment.firebaseConfig))
]
})
export class AngularFirebaseV7Module { }
This module utilizes the new API for angular firebase version 7, which is explained here.
To achieve this, I'm attempting to integrate this into a library.
Referring to Pass environment.ts To Angular Library Module, it seems that I can pass the environment as configuration and inject it using:
AngularFirebaseV7Module.forRoot(environment.firebaseConfig)
import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
// Here's what I want to eliminate:
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(() => {
// I want to avoid using `environment.firebaseConfig` directly but instead use the config passed in
return initializeApp(environment.firebaseConfig)
})
]
})
export class AngularFirebaseV7Module {
static forRoot(config: IFirebaseConfig): ModuleWithProviders<AngularFirebaseV7Module> {
// Access to the config is available here but not for imports
console.log(config)
return {
ngModule: AngularFirebaseV7Module,
providers: [
{
provide: FIREBASE_CONFIG,
useValue: config
}
]
};
}
}
However, how can I utilize this config within the imports like
provideFirebaseApp(() => initializeApp(config))