Module '"#angular/fire"' has no member 'AngularFireModule' exported [duplicate] - firebase

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

I solved the problem by using below import statement, in app.module.ts
import { AngularFirestoreModule } from '#angular/fire/compat/firestore/';

Answer 2

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 3

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:
Navigate to the StackBlitz Template Link mentioned in the Quick Links section of #angular/fire GitHub README.
Try importing AngularFirestoreModule in the AppModule and add it to the imports array.
import { AngularFirestoreModule } from '#angular/fire/firestore';
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();
}
}
You'll get an error saying:
ERROR Error: app.firestore is not a function
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.
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
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.
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.
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"
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 :)

Answer 4

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';