AngularFire@7.0.4下@angular/fire/firestore无AngularFirestoreModule导出报错如何解决

报错原因 #

你使用的@angular/fire v7及以上版本对模块化导入逻辑做了破坏性调整，原先v6及更早版本导出的AngularFirestoreModule已经被移除，所以会抛出找不到导出成员的错误。

修复方案 #

方案1：使用兼容层快速适配（适合存量老项目迁移） #

v7版本保留了向后兼容的compat入口，只需要修改导入路径即可：

1. 修改模块导入语句：

// 原错误导入
// import { AngularFirestoreModule } from '@angular/fire/firestore';
// 替换为compat路径导入
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

2. 对应的服务导入也要同步替换路径，比如AngularFirestore服务也要从@angular/fire/compat/firestore导入，其余原有逻辑不需要改动。

方案2：升级为v7+的模块化API（推荐新项目使用） #

v7开始适配Firebase官方的模块化SDK，不再需要导入NgModule，直接在根模块配置Firebase后注入对应的实例即可：

1. 根模块中导入配置方法完成初始化：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment'; // 你的Firebase配置文件

@NgModule({
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore())
  ],
  // 其余模块、声明、提供者配置保持不变
})
export class AppModule { }

2. 在业务组件/服务中直接注入Firestore实例使用：

import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(private firestore: Firestore) {}

  getList(collectionName: string): Observable<any[]> {
    const targetCollection = collection(this.firestore, collectionName);
    return collectionData(targetCollection);
  }
}

内容的提问来源于stack exchange，提问作者Nahrma Bozonda