0

I need to connect a second Firestore db to my Angular app and havent found a clean way to accomplish this. I have seen this challenge solved on stack in the past (How can I connect two databases with @angular/fire?) & have read this great article (https://medium.com/@handersonc/connecting-angular-with-multiple-firebase-projects-889bb7de1f56) however with the newest flavor of AngularFire (7.5) changing both the injected functions and the syntax, I'm not quite sure how to accomplish this.

Below is a summarized version of my setup. Would someone help or a least point me in the right direction? Thanks so much.

app.module.ts

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

import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFirestore,getFirestore  } from '@angular/fire/firestore';

@NgModule({
  declarations: [
    AppComponent,
    HomeLayout
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase-proj-1)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),

  ],
  providers: [
    ScreenTrackingService,UserTrackingService
  ],
  bootstrap: [AppComponent]
})

environment.prod.ts

export const environment = {
  production: true,
  firebase-proj-1: {
    projectId: 'xxx',
    appId: 'xxx',
    storageBucket: 'xxx',
    apiKey: 'xxx',
    authDomain: 'xxx',
    messagingSenderId: 'xxx',
    measurementId: 'xxx',
  },
  firebase-proj-2: {
    apiKey: "xxx",
    authDomain: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx",
    appId: "xxx",
    measurementId: "xxx"
  }
};

publications.service.ts

import { Injectable } from '@angular/core';
import { Firestore, collectionData, collection, 
          addDoc, QueryConstraint, query } from '@angular/fire/firestore';
import { orderBy } from 'firebase/firestore';

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

  collectionPath = collection(this.firestore, 'publications')

  constructor( private firestore: Firestore ) { }

  getPubs(){
    const contraints:QueryConstraint[] = [orderBy('name', 'asc')]
    return collectionData(query(this.collectionPath, ...contraints), {idField: 'id'})
  }

  createPub(form: unknown){
    return addDoc(this.collectionPath, form)
  }

}
Remy Bartolotta
  • 147
  • 13

1 Answers1

0

this work for me. (Angular 16, standalone, firebase modular)

In main.ts

bootstrapApplication(AppComponent, {
  providers: [
    // other imports...
    importProvidersFrom(provideFirebaseApp(() => initializeApp(environment.firebaseConfig1, '[DEFAULT]'))),
    importProvidersFrom(provideFirebaseApp(() => initializeApp(environment.firebaseConfig2, '[OTHER]'))),
    importProvidersFrom(provideFirestore(() => getFirestore())),
  ],
});

For change the firestore from one project to other create Injections tokens:

some-file.ts

export const FIRESTORE_CONFIG1 = new InjectionToken<Firestore>('firestore config 1', {
  providedIn: 'root',
  factory: () => getFirestore(getApp('[DEFAULT]'))
});

export const FIRESTORE_OTHER = new InjectionToken<Firestore>('firestore other', {
  providedIn: 'root',
  factory: () => getFirestore(getApp('[OTHER]'))
});

Now use the Injection token

some-service.service.ts

@Injectable({
  providedIn: 'root',
})
export class SomeService {
  #firestore = inject(FIRESTORE_OTHER); //change as needed

  async getData() {
    const dataRef = collection(this.#firestore, 'Mycollection');
    const doccuments = await getDocs(dataRef);
    console.log(doccuments);
  }
}

Now you can change the injection token as needed either dynamically with another service or with some condition.

I hope these lines will be helpful.

Jazz
  • 1