3

I recently started the process of upgrading my application to use Firebase 9. I started the process (as recommended here https://firebase.google.com/docs/web/modular-upgrade), by updating all my imports to the Firebase 9 compat modules. That all worked fine, the app starts up, but it seems like it won't connect to my local Firestore emulator. I get the following error in console:

Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.

I then switched off my emulator, to connect to my actual online Firestore, and then the app works without issue.

I decided to create a small Ionic app to play around with. As soon as I switch over to the Firebase 9 modular libraries, then I'm able to connect to my local Firestore emulator.

Below some code - First using the compat modules, which does not work with the emulator. (note the experimentalForceLongPolling - something that was suggested online, but did not work )

import { AngularFirestoreModule, SETTINGS, USE_EMULATOR as USE_FIRESTORE_EMULATOR} from '@angular/fire/compat/firestore';
import { AngularFireModule } from '@angular/fire/compat';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    },
    { 
      provide: USE_FIRESTORE_EMULATOR, 
      useValue: environment.emulator ? ['http://localhost:8080'] : undefined 
    },
    {
      provide: SETTINGS,
      useValue: { experimentalForceLongPolling: true, ssl: false, merge: true }
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  userName: User;

  constructor(
    private afs: AngularFirestore,
  ) { }

  ngOnInit(): void {
    this.afs
      .doc<User>(`users/1234`)
      .valueChanges().subscribe(data => {
        this.userName = data.data().name;
      });
  }
}

Then, the following works fine with the emulator:

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore, connectFirestoreEmulator, enableIndexedDbPersistence} from '@angular/fire/firestore';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(),
    provideFirebaseApp(() => initializeApp(environment.firebase)), 
    provideFirestore(() =>  {
      const firestore = getFirestore();
      connectFirestoreEmulator(firestore, 'localhost', 8080);
      enableIndexedDbPersistence(firestore);
      return firestore;
    })
  ],
  providers: [
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }
import { doc, docSnapshots, Firestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  userName: String;

  constructor(
    private afs: Firestore,
  ) { }

  ngOnInit(): void {
    let documetnRef = doc(this.afs, 'users/1234');
    docSnapshots(documetnRef).subscribe(data => {
      this.userName = data.data().name;
    })
  }
}

In case its needed, my dependency versions:

  "dependencies": {
    "@angular/common": "~13.2.2",
    "@angular/core": "~13.2.2",
    "@angular/fire": "^7.3.0",
    "@angular/forms": "~13.2.2",
    "@angular/platform-browser": "~13.2.2",
    "@angular/platform-browser-dynamic": "~13.2.2",
    "@angular/router": "~13.2.2",
    "@ionic/angular": "^6.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },

Does the emulator not support firebase 9 compat? Did I miss some documentation somewhere on it?
Don't mind converting my app to use the modular libraries, it would just have been more convenient to slowly move over.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807

0 Answers0