Hi I have a problem with connecting Firebase (Firestore) to my Angular App. Thats the first time I am trying to connect firebase, so i followed a tutorial from Google.
https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#10
In step 11 I have to import AngularFirestoreModule, which I did:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import { NavbarComponent } from './navbar/navbar.component';
import { CodeComponent } from './navbar/code/code.component';
import { ManagerComponent } from './manager/manager.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import {AngularFireModule} from "@angular/fire/compat";
import {AngularFirestoreModule} from "@angular/fire/compat/firestore";
@NgModule({
declarations: [
AppComponent,
MapComponent,
NavbarComponent,
CodeComponent,
ManagerComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule
],
providers: [
ManagerComponent,
CodeComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
After importing I got following issues:
Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:18 - error TS2430: Interface 'DocumentSnapshotExists<T>' incorrectly extends interface 'DocumentSnapshot<DocumentData>'.
The types returned by 'data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData | undefined'.
Type 'T' is not assignable to type 'DocumentData'.
13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41
13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
~
This type parameter might need an `extends firebase.firestore.DocumentData` constraint.
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41
13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
~
This type parameter might need an `extends firebase.firestore.DocumentData | undefined` constraint.
Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:18 - error TS2430: Interface 'QueryDocumentSnapshot<T>' incorrectly extends interface 'QueryDocumentSnapshot<DocumentData>'.
The types returned by 'data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData'.
node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:33
29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange {
~
This type parameter might need an `extends firebase.firestore.DocumentData` constraint.
× Failed to compile.
I dont know how to fix my problem or how I could connect my Firestore Database in another way.
Thank you for helping!
Here also my app.component.ts:
import { Component } from '@angular/core';
import {AngularFirestore} from "@angular/fire/compat/firestore";
import {Observable} from "rxjs";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
toMap:boolean = true;
items: Observable<any[]>;
constructor(firestore: AngularFirestore) {
this.items = firestore.collection('items').valueChanges();
}
switchToMap(){
this.toMap = !this.toMap;
}
}
I tried to follow a tutorial from Google, but got the problem, which is descriped in the upper field.
https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#10
3
Answers
I had the same issue and this Github comment fixed it for me:
https://github.com/angular/angularfire/issues/3290#issuecomment-1323837275
In your
node_modules/@angular/fire/compat/firestore/interfaces.d.ts, add a generic<T>to the end of the interfaces where the errors are.To start, update this line from this:
to this:
Do this for all of them.
The below worked in both Dev/Local and PROD
To build on top of @aghwotu’s answer, to help those who want to fix it for their prod environment where they might have a auto pipeline in place, follow the below steps:
I’m mostly talking to those who have a pipeline set up and can’t really manually push your node_modules to prod. If you’re looking to just do this in your dev environment or you can push your node_modules to you server, then @aghwotu’s answer is your easiest and quickest solution.
I’m using
github actionswithfirebase hosting.So I created a
firebase_broken.shand placed it the.github/scriptsfolder. You probably wont have thescriptsfolder in the.githubfolder, so you can just create it.Don’t forget to add the above script to the
firebase_broken.shfile – it’ll be awkward if you forget that lol.Then in my github actions files (both the pull request and merge .yml files) I added this:
Note: I added it right above my
npm run build -- --configuration productionPop me a question if it doesn’t work. It worked for me so I’m sure we can get it to work for you.
All I did was take @aghwotu’s answer and wrote a script for it to work on an automated release pipeline.
Good luck and may Firebase be kind to us all.
Here’s a link to some other peeps who struggled with the same issue: Github Issue – Angular Firebase: interfaces.d.ts
You can make it more simple by changing your tsconfig.json file and telling the compiler not to do strict type-checking in external libraries by adding the below line to the compilerOptions: