将 Firebase 模拟器与 AngularFire 一起使用

Posted 2023-02-19

【中文标题】将 Firebase 模拟器与 AngularFire 一起使用

【英文标题】：Using Firebase emulator with AngularFire

【发布时间】：2019-08-09 21:52:31

【问题描述】：

我正在尝试在我的 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  

【问题讨论】：

最新的firebase工具没有选项--only firestore。唯一有效的目标是hosting 和functions。就我现在而言，您只能为 functions 和 hosting locally 提供服务，而不是 firestore。您必须使用在线firestore。

@fitzmode 它有，该选项处于测试阶段，请参阅firebase.google.com/docs/firestore/security/test-rules-emulator

【参考方案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

【讨论】：

补充一下，FirestoreSettingsToken可以从'@angular/fire/firestore'导入:)

【参考方案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>',
    ,
;

【讨论】：

databaseUrl 中的<your-id> 是什么

@mbaljeetsingh 这取决于该领域，我已经更新了答案。

【参考方案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],
    ,
  ],

【讨论】：

我希望这可以在 AngularFire github 存储库中找到。谢谢你。

@Jessy github.com/angular/angularfire/blob/master/docs/emulators/…

【参考方案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 可以是动态的并与环境变量相关联以进行更整洁的配置。

【参考方案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