Module '"@firebase/firestore"' has no exported member 'type' ERROR in Angular 12

Question

I am working on a project on Angular 12 and I use Firestore to store my datas.

In my app module, I imported the needed Modules as follows (it was automatically added when I added firebase to my project):

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

...
imports: [
    ...
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
  ],
...

When I followed the tutorial and try to add a document into a collection, I need to import "AngularFirestore", I do this as follows in my component ts:

import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private firebase: AngularFirestore) {}

const ref = this.firebase.collection('collection-name');
ref.add(my-data);

I was expecting the app to work but it crashes once I import "AngularFirestore" and I get the following error: The error

The versions I am working with are:

the versions

Answer 1

Edit your app module imports as follows

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore'
import { environment } from '@env/enviroment';

....

imports [
AngularFirestoreModule,
AngularFireModule.initializeApp(environment.firebase),
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
]

Hopefully that helps