模塊“@firebase/firestore”在 Angular 12 中沒有導出成員“類型”錯誤

Question

我正在 Angular 12 上開展一個項目，我使用 Firestore 來存儲我的數據。

在我的應用程序模塊中，我按如下方式導入了所需的模塊（當我將 firebase 添加到我的項目時自動添加）：

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

...
imports: [
    ...
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
  ],
...

當我按照教程嘗試將文檔添加到集合中時，我需要導入“AngularFirestore”，我在我的組件 ts 中按如下方式執行此操作：

import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private firebase: AngularFirestore) {}

const ref = this.firebase.collection('collection-name');
ref.add(my-data);

我原以為該應用程序可以正常工作，但是一旦我導入“AngularFirestore”它就會崩潰，並且出現以下錯誤：錯誤

我正在使用的版本是：

版本

Answer 1

按如下方式編輯您的應用程序模塊導入

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore'
import { environment } from '@env/enviroment';

....

imports [
AngularFirestoreModule,
AngularFireModule.initializeApp(environment.firebase),
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
]

希望這有幫助