Angular配置Firebase模拟器后登录出现auth网络请求失败如何解决？

该问题由 @angular/fire v7+ 与旧版配置格式不兼容导致：你当前使用的 [host, port] 数组配置仅适用于 @angular/fire v6 及更早版本，v7 版本后Auth模拟器的配置需传入完整带协议的端点字符串，旧配置不生效导致Auth请求默认打到线上Google服务端点而非本地模拟器。

修改后的配置代码 #

import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/compat/database';
import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/compat/firestore';

@NgModule({
  // ... 现有配置
  providers: [
    // ... 现有提供者
    // Auth模拟器修改为直接传入完整端点地址
    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? 'http://localhost:9099' : undefined },
    // 数据库、Firestore模拟器如果也出现类似连接问题，同步修改为如下格式：
    { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? 'http://localhost:9000' : undefined },
    { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? 'http://localhost:8080' : undefined },
  ]
})
export class AppModule { }

额外检查项 #

• 确认 environment.ts 中 useEmulators 字段已设置为 true，生产环境配置文件中该字段设为 false 即可自动切到线上服务
• 检查项目根目录 firebase.json 中Auth模拟器的端口配置，确认与代码中配置的9099一致：

  "emulators": {
    "auth": {
      "port": 9099,
      "host": "localhost"
    }
  }
  

• 重启前端服务和Firebase模拟器，清除浏览器缓存后再测试，避免之前的旧Auth状态残留导致请求异常

内容的提问来源于stack exchange，提问作者Milan Ferus-Comelo