javascript - 将 Firebase 模拟器与 AngularFire 一起使用

Question

我正在尝试在我的 Angular7 应用程序中使用新引入的 Firestore 模拟器。

根据 this documentation ，我在 127.0.0.1:8080 上运行开发服务器:

firebase serve --only firestore

然后，在 ng serve 之后，如何让我的 AngularFire 模块使用数据库模拟器？

我在我的 environment.ts 中尝试了以下内容:

export const environment = {
  production: false,
  name: 'local',
  firebase: {
    databaseURL: "http://127.0.0.1:8080"
  }
};

但它不起作用，因为它需要一个“projectId”。我尝试将其设置为我的预生产 Firestore 数据库，但随后未使用开发服务器。

想过吗？

这是我的 app.module.ts :

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'),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我通过在主应用程序模块中添加一个提供程序来覆盖环境文件设置的一些变量来使其工作。

参见 This answer到 angularfire 仓库中的一个问题。示例(来自答案):

{
  provide: FirestoreSettingsToken,
  useValue: environment.production ? undefined : {
    host: 'localhost:8081',
    ssl: false
  }
}

由于我有几个不同的环境，我让条件在环境中查找“模拟器”属性，如果它为假或未定义则返回未定义，而不是查找生产属性并在存在时返回未定义:

{
  provide: FirestoreSettingsToken, useValue: environment.emulator ? {
      host: 'localhost:8081',
      ssl: false
  } : undefined
}

更新于 AngularFire v6.x.x :

FirestoreSettingsToken 已更改为 @angular/fire/firestore 模块中的 SETTINGS