Angular7项目中配置AngularFire对接Firestore模拟器的问题

我来帮你搞定这个问题！你之前的配置踩了两个小坑：一是用了databaseURL（这是给Realtime Database用的配置项，Firestore不适用），二是缺少必填的projectId（哪怕是本地模拟用的假ID也得填）。下面是具体的解决步骤：

1. 修正environment.ts配置 #

先更新你的环境配置文件，补上projectId并专门为Firestore设置模拟器连接参数：

export const environment = {
  production: false,
  name: 'local',
  firebase: {
    projectId: "my-local-firestore-dev", // 随便填个字符串就行，模拟器不需要真实项目ID
    apiKey: "dummy-api-key", // 占位符即可，模拟器不验证这个字段
    authDomain: "localhost",
    storageBucket: "local-storage-bucket"
  },
  // 单独配置Firestore模拟器的连接信息
  firestore: {
    host: '127.0.0.1:8080',
    ssl: false // 本地模拟器不需要SSL加密
  }
};

这里的projectId是AngularFire初始化时的必填项，完全不用纠结真实项目ID，写个本地标识就行。

2. 修改app.module.ts配置Firestore连接 #

接下来在AppModule里，给AngularFirestoreModule添加模拟器的连接设置，替换原来单纯的模块导入：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from '@app/app-routing.module';
import { AppComponent } from '@app/app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '@env/environment';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase, 'my-super-cool-app'),
    // 配置Firestore连接到本地模拟器
    AngularFirestoreModule.withSettings({
      host: environment.firestore.host,
      ssl: environment.firestore.ssl
    }),
    AngularFireAuthModule,
    AngularFireStorageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 验证运行流程 #

完成配置后按以下顺序启动服务：

• 先执行firebase serve --only firestore启动Firestore模拟器，确认它在127.0.0.1:8080正常运行
• 再执行ng serve启动Angular应用

现在你的AngularFire模块就会正确连接到本地Firestore模拟器，既不会报projectId缺失的错误，也不会连接到线上的Firestore数据库了。

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