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.