How Do I Provision Multiple Firestore Projects in as Services in Angular 18 using Standalone...

I am trying to provision multiple Angularfire Firestore projects as injectable services for my Angular 18 project. Here is my approach:

main.ts

bootstrapApplication(AppComponent, {
providers: [
provideFirebaseApp(() => initializeApp(firebaseConfig.project_1, '[PROJECT_1]')),
provideFirebaseApp(() => initializeApp(firebaseConfig.project_2, '[PROJECT_2]')),
provideFirestore(() => getFirestore())
]
});


project_1.service.ts

export const SCAN4DEALS = new InjectionToken < Firestore > ('project_1', {
providedIn: 'root',
factory: () => getFirestore(getApp('[PROJECT_1]'))
});

@Injectable({
providedIn: 'root'
})
export class Project_1Service {

private firestore = Inject(PROJECT_1);

public async getData(path: string): Promise < any > {
const dataRef = collection(this.firestore, path);
const documents = await getDocs(dataRef);
return documents;
}

}


I'm getting the following error:

Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using
provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported).


Any help would be greatly appreciated. Thanks in advance!

Continue reading...