AngularFire 7 无法适配Firebase模拟器，求正确配置方案

之前在AngularFire 6中成功配置过Functions模拟器，但升级到AngularFire 7后，无法同时适配Firestore和Functions模拟器。当前代码错误地从@angular/fire/compat/functions导入模拟器配置常量，导致AngularFire 6与7混用，以下是纯AngularFire 7的配置方案：

核心修改步骤 #

1. 替换模拟器配置的导入路径 #

AngularFire 7中，Firestore和Functions的模拟器配置常量分别来自各自的独立包，不再依赖compat兼容层：

• Firestore模拟器：从@angular/fire/firestore导入USE_EMULATOR
• Functions模拟器：从@angular/fire/functions导入USE_EMULATOR

2. 调整AppModule配置 #

移除compat包的导入，注册Functions模块并保持环境变量的模拟器开关逻辑不变。

修改后的完整app.module.ts代码 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore, getFirestore, USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/firestore';
import { provideFunctions, getFunctions, USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/functions';

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()) // 新增：注册Functions模块
  ],
  providers: [
    { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
    { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外注意事项 #

• 确保已安装Functions模块依赖：执行 npm install @angular/fire/functions
• 启动模拟器时，在Firebase项目根目录运行：

  firebase emulators:start --only firestore,functions
  

• 验证连接：打开浏览器开发者工具的Network标签，确认函数调用请求指向localhost:5001，Firestore请求指向localhost:8080

验证流程 #

1. 启动Firebase模拟器
2. 运行Angular项目（ng serve）
3. 在表单输入消息提交，查看Firestore模拟器控制台的文档创建记录
4. 检查Functions模拟器日志是否输出Uppercasing相关信息，同时确认页面实时显示转换后的大写字段

内容的提问来源于stack exchange，提问作者Thomas David Kehoe