Angular 18升级后@angular/fire报错：缺少./compat/firestore/路径

问题原因 #

@angular/fire 18.x版本完全移除了compat兼容层，不再支持旧的@angular/fire/compat/*导入路径——这是因为Firebase 11.x已经全面转向模块化API，AngularFire同步跟进了这一变化，你的项目升级后仍在使用旧的compat导入方式，导致找不到对应模块。

解决方案 #

1. 替换所有compat导入为模块化API
   遍历项目中所有使用@angular/fire/compat/firestore的文件，将旧导入替换为新的模块化形式：

   • 旧代码示例：

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

   • 新代码示例（使用AngularFire的服务式导入）：

     import { Firestore, collection, addDoc, doc, getDoc } from '@angular/fire/firestore';
     

     或者依赖注入AngularFire的Firestore实例：

     import { Firestore } from '@angular/fire/firestore';
     
     constructor(private firestore: Firestore) {}
     
     // 使用示例：获取集合
     const itemsCollection = collection(this.firestore, 'items');
     

2. 更新Firebase初始化配置
   Angular 18+和@angular/fire 18.x采用standalone API初始化，替换原有的模块导入方式：

   • 旧模块配置（AppModule）：

     import { AngularFireModule } from '@angular/fire/compat';
     import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
     
     @NgModule({
       imports: [
         AngularFireModule.initializeApp(environment.firebase),
         AngularFirestoreModule
       ]
     })
     export class AppModule {}
     

   • 新standalone配置（main.ts）：

     import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
     import { provideFirestore, getFirestore } from '@angular/fire/firestore';
     import { environment } from './environments/environment';
     
     bootstrapApplication(AppComponent, {
       providers: [
         provideFirebaseApp(() => initializeApp(environment.firebase)),
         provideFirestore(() => getFirestore()),
         // 按需添加其他Firebase服务的provider，比如auth、storage等
       ]
     });
     

3. 清理依赖缓存并重新安装
   残留的缓存可能导致模块解析异常，执行以下步骤：

   • 删除node_modules文件夹
   • 删除package-lock.json文件
   • 执行npm install重新安装依赖
   • 清理Angular CLI缓存：ng cache clean

4. 检查其他compat导入
   项目中如果还有@angular/fire/compat/auth、@angular/fire/compat/storage等其他compat路径的导入，都需要替换为对应的新路径（如@angular/fire/auth、@angular/fire/storage），并同步更新相关代码逻辑。

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