Is there a new way to import @angular/fire module with AngularFire 7?

Issue

I am having a lot of issues getting @angular/fire to work with a new project and getting errors that the modules can not be found.

My project consists of:

"@angular/common": "~13.0.0",
"@angular/fire": "^7.2.0",
"@capacitor/core": "3.3.4",
"@ionic/angular": "^6.0.0"

However, when I attempt to compile the app, I am receiving a number of errors that Modules can not be found like this:

[ng] ./node_modules/@angular/fire/fesm2015/angular-fire-auth.js:9:0-93 - Error: Module not found: Error: Can't resolve 'rxfire/auth' in '/Users/me/Development/app/node_modules/@angular/fire/fesm2015'
[ng] 
[ng] ./node_modules/@angular/fire/fesm2015/angular-fire-firestore.js:10:0-288 - Error: Module not found: Error: Can't resolve 'rxfire/firestore' in '/Users/me/Development/app/node_modules/@angular/fire/fesm2015'
[ng] 
[ng] Error: node_modules/@angular/fire/firestore/rxfire.d.ts:1:261 - error TS2307: Cannot find module 'rxfire/firestore' or its corresponding type declarations.
[ng] 
[ng] 1 import { collectionChanges as _collectionChanges, collection as _collection, sortedChanges as _sortedChanges, auditTrail as _auditTrail, collectionData as _collectionData, doc as _doc, docData as _docData, snapToData as _snapToData, fromRef as _fromRef } from 'rxfire/firestore';

Any ideas on how to fix or correct this? I have attempt to remove my node_modules and reinstall, but that did not help. The folders for @angular/fire appear in my node_modules directory.

This is my app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule, 
        IonicModule.forRoot(), 
        AppRoutingModule,
        provideFirebaseApp(() => initializeApp(environment.firebase)),
        provideFirestore(() => getFirestore())
    ],
    providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
    bootstrap: [AppComponent],
})
export class AppModule {}

And my services file:

import { Injectable } from '@angular/core';
import { Firestore, collection, collectionData, doc, docData, addDoc, deleteDoc, updateDoc } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export interface Item {
    id?: string;
    active: boolean;
    category: string;
    location: string;
    quantity: number;
    title: string;
}

@Injectable({
    providedIn: 'root'
})

export class FirestoreService {

    constructor(private firestore: Firestore) { }
    
    getItems(): Observable<Item[]> {
        const itemsRef = collection(this.firestore, 'items');
        return collectionData(itemsRef, { idField: 'id'}) as Observable<Item[]>;
    }
    
    getItemById(id: any): Observable<Item> {
        const itemDocRef = doc(this.firestore, `items/${id}`);
        return docData(itemDocRef, { idField: 'id' }) as Observable<Item>;
    }
    
    addItem(item: Item) {
        const itemsRef = collection(this.firestore, 'items');
        return addDoc(itemsRef, item);
    }
    
    deleteItem(item: Item) {
        const itemDocRef = doc(this.firestore, `items/${item.id}`);
        return deleteDoc(itemDocRef);
    }
    
    updateItem(item: Item) {
        const itemDocRef = doc(this.firestore, `items/${item.id}`);
        return updateDoc(itemDocRef, { active: item.active, category: item.category, location: item.location, quantity: item.quantity, title: item.title });
    }
}

Solution

Installing npm i rxfire firebase rxjs --save fixed this issue for me.

Answered By - zeropsi