时间戳

首页 > 解决方案 > 将 Firebase 模拟器与 AngularFire 一起使用

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

问题描述

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

根据这个文档，我运行开发服务器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 { }

标签： javascriptangularfirebasegoogle-cloud-firestoreangularfire2

解决方案

我通过在主应用程序模块中添加一个提供程序来实现它，该提供程序覆盖了环境文件设置的一些变量。

请参阅angularfire repo 中对问题的此答案。示例（来自答案）：

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

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

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

从AngularFire v6.xx 开始更新：

FirestoreSettingsToken已更改为SETTINGSin@angular/fire/firestore模块

推荐阅读