angular - Firestore lokal emulator fungerer ikke med Firebase 9 Compat
Jeg begynte nylig prosessen med å oppgradere applikasjonen min til å bruke Firebase 9. Jeg startet prosessen (som anbefalt her https://firebase.google.com/docs/web/modular-upgrade) ved å oppdatere alle importene mine til Firebase 9 compat-modulene. Det fungerte helt fint, appen starter opp, men det ser ut til at den ikke vil koble til min lokale Firestore-emulator. Jeg får følgende feil i konsollen:
Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.Jeg slo deretter av emulatoren min for å koble til min faktiske nettbaserte Firestore, og deretter fungerer appen uten problemer.
Jeg bestemte meg for å lage en liten Ionic-app å leke med. Så snart jeg bytter over til Firebase 9 modulære biblioteker, kan jeg koble til min lokale Firestore-emulator.
Nedenfor er litt kode - Først ved bruk av compat-modulene, som ikke fungerer med emulatoren. (merk den eksperimentelle experimentalForceLongPolling - noe som ble foreslått på nettet, men som ikke fungerte)
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;
});
}
}
Da fungerer følgende fint med emulatoren:
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;
})
}
}
Hvis det er nødvendig, mine avhengighetsversjoner:
"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"
},
Støtter ikke emulatoren Firebase 9 compat? Gikk jeg glipp av noe dokumentasjon om det et sted?
Jeg har ikke noe imot å konvertere appen min til å bruke de modulære bibliotekene, det ville bare vært mer praktisk å flytte over gradvis.