将@angular/fire从6.x升级至7.1.0-rc4时出现AngularFirestore导入编译错误的技术求助

我帮你排查到了问题的核心：在@angular/fire 7.x的兼容（compat）模式下，AngularFirestore并不是从根路径@angular/fire/compat导出的，而是需要从对应的子模块路径导入。以下是具体的解决步骤：

1. 修正组件/服务中的导入语句 #

你当前的导入路径是错误的，把所有用到AngularFirestore的地方的导入代码修改为：

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

注意：如果你的代码里用到了Firestore相关的其他类（比如集合、文档对象），也要同步把它们的导入路径指向@angular/fire/compat/firestore，而不是旧的@angular/fire路径。

2. 清理依赖缓存并重新安装 #

旧版本的依赖缓存可能会导致编译时的路径解析异常，执行以下命令彻底清理并重新安装依赖：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

如果你使用yarn，对应替换为yarn的清理命令即可。

3. 确认AppModule的配置正确性 #

看你提供的app.module.ts代码，已经正确导入了AngularFirestoreModule从@angular/fire/compat/firestore，这部分配置是没问题的，不需要修改。

4. 验证Ivy兼容性（可选） #

Angular 12默认启用Ivy编译器，@angular/fire 7.x已经完全兼容Ivy。如果执行完上述步骤仍有问题，可以检查tsconfig.json中的angularCompilerOptions，确保enableIvy设置为true（Angular 12默认就是开启状态）。

为什么会出现这个错误？ #

AngularFire 7.x为了适配Firebase 9的模块化架构，对导入结构进行了重构：

• 新的模块化API直接从@angular/fire/firestore等子路径导入
• 兼容旧代码的compat模式，也把各个服务拆分到了对应的子目录下，不再像6.x版本那样从根目录统一导出所有服务。

内容的提问来源于stack exchange，提问作者Lucio Crusca