有没有一种新的方法可以使用 AngularFire 7 导入 @angular/fire 模块？

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 并重新安装，但这没有帮助。 @angular/fire 的文件夹出现在我的 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

对我有用。在你的 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',
  },
};

Answer 2

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

有没有一种新的方法可以使用 AngularFire 7 导入 @angular/fire 模块？

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

ionic-framework

angular