是否有一种新的方法可以用AngularFire 7导入“角/火”模块？

Question

我有很多问题，让@angular/fire与一个新的项目工作，并得到错误的模块找不到。

我的项目包括：

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

但是，当我试图编译应用程序时，我收到了一些模块无法找到的错误：

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

对于如何解决或纠正这个问题，有什么想法吗？我试图删除我的node_modules并重新安装，但这并没有帮助。“角/火”文件夹出现在我的node_modules目录中。

这是我的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 {}

我的服务档案：

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 });
    }
}

Answer 1

安装npm i rxfire firebase rxjs --save为我解决了这个问题。

Answer 2

对我来说很管用。在你的app.module.ts：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { environment } from '../environments/environment';
...
imports : [AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,...]
...

“添加环境”文件夹包含两个配置文件，environment.prod.ts包含：

export const environment = {
  production: true
};

environment.ts包含您的firebase配置数据：

export const environment = {
  production: false,
  firebase: {
    apiKey: 'fakej4WNtMJ_lLLjjizRCbsWABN4q-PrgMw',
    authDomain: 'fake.firebaseapp.com',
    projectId: 'fake-gabes',
    storageBucket: 'fake.appspot.com',
    messagingSenderId: '1111111111',
    appId: '1:323232323:web:77777',
  },
};