Search code examples
angularfirebasegoogle-cloud-firestorefirebase-tools

Firebase emulator does not show firestore collections/documents added from angular app

I have an angular app that is connecting to firebase with a local emulator set up. The emulator for auth works perfectly, I can see users created in the demo app and I can login with those users in the demo app.

The problem is that any collections or documents I try to add to the firestore emulator do now show up in the emulator.

I can see the request gets sent to the emulator I the requests tab: enter image description here

However, the data does not show in the emulator UI:

enter image description here

here is the firebase app config for the demo set up:

  firebase: {
    apiKey: "******",
    authDomain: "t3-training-***.firebaseapp.com",
    projectId: "demo-t3-training-***",
    storageBucket: "t3-training-***.appspot.com",
    messagingSenderId: "170427355128",
    appId: "1:170427355128:web:1145047c4a8500d940d00d",
  },

and here is the cli command I use to run the emulators

firebase emulators:start --project=demo-t3-training-*** --import=./.firebase/saved-data/

I can import and export data that I manually add to the emulator firestore UI, it just does not show the data added through the angular app.

Also, I tried using firefoo to connect to the emulator and it also does not show the data

I have read some other posts about this issue being cause by a projectId mismatch but as you can see the cli call exactly matches the projectId from the config. I have tried uninstalling and reinstalling the firebase tools, and changing the tools version to 11. Did not fix the issue.

Can someone help me figure out why my emulators won't fully connect to my demo project/app.

What I have installed

firebase:        10.7.2
firebase-tools:  10.3.0
angular;         17.0.0

note when I run npm install -g firebase-tools it installs verson 10.7.2

EDIT 1:

here is the code in my service that calls the add document function

  private firestore = inject(FIRESTORE);
  private messagesCollection = collection(this.firestore, 'trainingRecords');


  addRecord$ = this.addRecordRequest$.pipe(
    exhaustMap((action) =>
      defer(() => addDoc(this.messagesCollection, action.payload))
    ),
    toRequestSource('[FEAT RECORDS] record added')
  );

here is my FIRESTORE setup:

const app = initializeApp(environment.firebase);
const isDevelopment = isDevMode();

export const FIRESTORE = new InjectionToken('Firebase firestore', {
  providedIn: 'root',
  factory: () => {
    let firestore: Firestore;
    if (isDevelopment) {
      firestore = initializeFirestore(app, {});
      connectFirestoreEmulator(firestore, 'localhost', 8080);
    } else {
      firestore = getFirestore();
    }
    return firestore;
  },
});

NOTE: i had to use the isDevMode() provided by angular because I keep my firebase config in a separate library because this app is inside an nx monorepo. So i use isDevelopment to connect the emulators

EDIT 2:

I am seeing this warning in the emulator logs:

Multiple projectIds are not recommended in single project mode. Requested project ID t3-training-48794, but the emulator is configured for demo-t3-training-48794. To opt-out of single project mode add/set the '"singleProjectMode": false' property in the firebase.json emulators config.

Not sure where the config is getting mixed up which project to load

Solution

  • so it turns out the way I have my project set up, using a demo prefix for the project name in the environment file is what broke this. removing the demo prefix and using the actual project name allowed me to connect the emulators and see real time data.