将 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
  }
}

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

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

更新至AngularFire v6.x.x：

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

Answer 2

我可以直接从environment.ts 文件运行它而不会引发任何错误。

export const environment = {
    production: false,
    firebaseConfig: {
        host: 'localhost:8081',
        ssl: false,
        apiKey: '<api-key>',
        authDomain: '<project-id>.firebaseapp.com',
        databaseURL: 'http://localhost:9000?ns=<project-id>',
        projectId: '<project-id>',
        appId: '<app-id>',
        measurementId: '<measurement-id>',
    },
};

Answer 3

使用“Firebase 模拟器”并不像最初看起来那么明显，因为“模拟器”实际上是模拟器的集合。设置一个并不意味着设置所有。您甚至可以根据需要设置一些在本地运行，而另一些在远程运行。

要将所有模拟器设置为在本地运行，您可以使用这些提供程序：

import { AngularFireAuthModule, USE_EMULATOR as AUTH_EMULATOR } from '@angular/fire/auth';
import { USE_EMULATOR as FIRESTORE_EMULATOR } from '@angular/fire/firestore';
import { USE_EMULATOR as DATABASE_EMULATOR } from '@angular/fire/database';
import { USE_EMULATOR as FUNCTIONS_EMULATOR } from '@angular/fire/functions';

...

  providers: [
    {
      provide: AUTH_EMULATOR,
      useValue: environment.production ? undefined : ['localhost', 9099],
    },
    {
      provide: FIRESTORE_EMULATOR,
      useValue: environment.production ? undefined : ['localhost', 8080],
    },
    {
      provide: DATABASE_EMULATOR, // i.e., Realtime Database
      useValue: environment.production ? undefined : ['localhost', 9000],
    },
    {
      provide: FUNCTIONS_EMULATOR,
      useValue: environment.production ? undefined : ['localhost', 5001],
    },
  ],

Answer 4

在this Article from Dev.to 之后，我设法设置了我的 Angular 8 应用程序，以与我模拟的 firebase 函数、firestore 和实时数据库进行通信。

火力基地：

简而言之：firebase 配置可能是在您的环境中设置的已注册 Firebase 应用程序（projectId 等）的配置：`"firebase": {...actual firebase config here...}` 或通过 API 检索。

请不要将您的API密钥和重要信息暴露在前端中的生产应用程序。

如何（对于那些没有设置）： 可以在上面的文章或官方文档中遵循模拟 Firebase：Setup Firebase Emulators，Run Functions Locally。

角度：

以下是文章中关于 Angular 的配置的 sn-ps。

src/environments/environment.ts

{ ...
  emulator:true
}

src/app/app.module.ts

import {AngularFirestoreModule, SETTINGS} from "@angular/fire/firestore";

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [{
    provide: SETTINGS,
    useValue: environment.emulator ? {
      host: 'localhost:8080',
      ssl: false
    } : undefined
  }],
  bootstrap: [...]
})
export class AppModule {
}

src/app/app.component.ts

文章摘录：

public ngOnInit() {
    if (environment.emulator) {
      this.aff.useFunctionsEmulator('http://localhost:5001').then(() => console.log('Using functions emulator'))
    }
}

对比：我实施的是：

constructor(...
private app: FirebaseApp) {...}

...

ngOnInit() {
  if (environment.emulator) {
    this.app.functions().useFunctionsEmulator('http://localhost:5001');
    console.log('Using functions emulator');
  }
}

文章中的注意事项适用于 database / firestore 而不是函数：

注意：其他 firebase 客户端 sdk 的整体概念是相同的，但语法会在实现之间发生变化。 主要目标是真正告诉 firebase sdk，您希望使用不同的 url 来指向该服务。

---

Angular：为什么要这样？

它允许您模拟多个环境，而无需更改您正在模拟的环境（文件）的基础架构（不对本地主机进行硬编码更改，而是应用程序本身会更改这些值）。

我建议仅将其用作模板并针对您的应用程序进行自定义 - 例如，app.modules 中的 localhost:8080 可以是动态的并与环境变量相关联以进行更整洁的配置。

Answer 5

基于this documentation，从 6.1.0 版开始，您可以这样做：

import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/firestore';

@NgModule({
  // ... Existing configuration
  providers: [
    { provide: USE_FIRESTORE_EMULATOR, useValue: ['localhost', 8081] }
  ]
})
export class AppModule { }