有沒有一種新方法可以使用AngularFire7匯入@angular/fire模塊？

我在@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 });
    }
}

uj5u.com熱心網友回復：

它對我有用。在您的 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',
  },
};

uj5u.com熱心網友回復：

安裝npm i rxfire firebase rxjs --save為我解決了這個問題。

標籤：

上一篇：離子搜索欄減少底部的邊距

下一篇：電容狀態欄覆寫影響鍵盤