I have encountered a challenge with Firebase authentication in my Angular applications. Due to updated read and write rules that require auth!=null, I successfully implemented Firebase authentication in one of my apps using Angular 13. Now, I am trying to replicate the same implementation in my Angular 15 app. I have installed Angular Fire and Firebase modules and attempted to add the necessary modules to app.module.ts. However, everything goes smoothly until I include import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
Subsequently, I encounter the following errors:
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 {
~~~~~~~~~~~~~~~~~~~~~~
// More error messages...
This issue arises when I add the import statement for AngularFirestoreModule in my app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { CircleComponent } from './circle/circle.component';
import { ChatComponent } from './chat/chat.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ContactComponent } from './contact/contact.component';
import { AngularFireModule } from '@angular/fire/compat';
// import { AngularFirestoreModule } from '@angular/fire/compat/firestore'; THROWS THE ERROR
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import firebase from 'firebase/compat/app';
// Rest of the module code...
In my package.json file:
"dependencies": {
"@angular/animations": "^15.1.0",
// Other dependencies...
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.1.4",
// Other dev dependencies...
}
Upon running ng version, I get the following output:
Angular CLI: 15.1.6
Node: 18.14.0
Package Manager: npm 9.3.1
OS: darwin arm64
Angular: 15.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
// Versions of other packages...
Unfortunately, lowering the TypeScript version to 4.7.4 is not feasible due to certain dependencies requiring higher versions. Any assistance in resolving this issue would be greatly appreciated!