Cannot find @angular/fire/firestore module error in VScode

Question

I am very new to firebase firestore. And this is my first project with firestore. I installed angular fire with this command

npm install firebase @angular/fire --save

and now importing the angularfiremodule like this

import { AngularFireModule } from '@angular/fire';

and angularfirestoremodule like this

import { AngularFirestoreModule } from '@angular/fire/firestore';

But this is giving me error

Cannot find module '@angular/fire'.ts(2307)

Any idea what might be the error? I tried google searching but since I am new to firebase, everything seems very mixed up to me. Also, I'm using ionic version 4, Angular version 8.1.3 and node version 10.16.3 if that makes any difference.

Angularfire2 was working fine previously, but since it's deprecated, I want to move to angular/fire.

Answer 1

With new angualr-firebase version (v7.5.0), the following code will work :

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

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

and

import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

interface Item {
  name: string,
  ...
};

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of item$ | async">
      {{ item.name }}
    </li>
  </ul>
  `
})
export class AppComponent {
  item$: Observable<Item[]>;
  constructor(firestore: Firestore) {
    const collection = collection(firestore, 'items');
    this.item$ = collectionData(collection);
  }
}

Link: https://www.npmjs.com/package/@angular/fire

Answer 2

In app.module.ts add this

import { AngularFirestoreModule } from '@angular/fire/firestore';

In your file import AngularFireStore as

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

Answer 3

My problem solved by using import like this which i have mentioned below with firebase version 9 and firestore 7 and angular 12.

As per the offical document

Documentation

Got reference from this link: https://dev.to/jdgamble555/angular-12-with-firebase-9-49a0

For official reference check this out:
https://firebase.google.com/docs/firestore/quickstart

Install firestore by using

ng add @angular/fire

Install firebase by using

npm install firebase

import { NgModule } from '@angular/core';        
import { BrowserModule } from '@angular/platform-browser';        
import { AppRoutingModule } from './app-routing.module';        
import { AppComponent } from './app.component';        
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';        
import { getAuth, provideAuth } from '@angular/fire/auth';        
import { getFirestore, provideFirestore } from '@angular/fire/firestore';        
import { getStorage, provideStorage } from '@angular/fire/storage';        
import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';        

import { environment } from '../environments/environment';               

@NgModule({
  declarations: [        
    AppComponent,        
    DashboardComponent,       
    ForgotPasswordComponent,        
    SignInComponent,      
    SignUpComponent,  
    VerifyEmailComponent
  ],
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),     
    provideFirestore(() => getFirestore()),  
    provideAuth(() => getAuth()),  
    provideStorage(() => getStorage()),  
    provideAnalytics(() => getAnalytics()),  
    BrowserModule,  
    AppRoutingModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
 })    
export class AppModule { }

Answer 4

I solved the problem by using below import statement, in app.module.ts

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

Answer 5

There's some version mismatch issue here.

Here's what you might want to do in order to make this work.

DISCLAIMER: I'll be using StackBlitz for Demo Purposes.

Steps to follow:

1. Navigate to the StackBlitz Template Link mentioned in the Quick Links section of @angular/fire GitHub README.

2. Try importing AngularFirestoreModule in the AppModule and add it to the imports array.

   import { AngularFirestoreModule } from '@angular/fire/firestore';
   

3. Go to your AppComponent and import AngularFirestore and inject it as a dependency:

   import { Component } from '@angular/core';
   import { Observable } from 'rxjs';
   import { AngularFirestore } from '@angular/fire/firestore';
   
   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: [ './app.component.css' ]
   })
   export class AppComponent  {
     items: Observable<any[]>;
     constructor(db: AngularFirestore) {
       this.items = db.collection('items').valueChanges();
     }
   }
   

4. You'll get an error saying:

   ERROR Error: app.firestore is not a function

5. You would like to do a Google search finding the reason and a probable fix for the issue. You'll probably end up on this GitHub thread which would suggest that you reinstall the dependencies.

6. Since we are on StackBlitz, you'll just press the "Update all deps to latest" button in the DEPENDENCIES section. As soon as you do that, you'll start getting an error saying:

   Can't find package:core-js

7. It's apparently a known issue for StackBlitz. In order to fix it, you'll do a Google search again and probably end up on this GitHub thread.

8. As suggested in the thread, you'll install core-js@2 by adding it to the DEPENDENCIES Field and pressing enter. This will install Version 2.6.11 of core-js.

9. Now you'll get an error saying:

   Can't find package:@firebase/app

   To fix it, you'll just click on the blue button that says "INSTALL PACKAGE @firebase/app"

10. Finally, you'll get an error saying:

    ERROR Error: "projectId" not provided in firebase.initializeApp.

    To fix this, just paste in your firebase config.

And hopefully, after following all these steps, you should be able to see the project updated to @angular/fire.

Here's a Working Demo till Step 9 to save some of your time.

Hope this helps :)