将Firebase模拟器与AngularFire结合使用

Question

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

Answer 1

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

见这个回答某个问题在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.xx 开始更新：

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

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

根据此文档，自版本 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 { } 

版本7

从版本 7 开始，您需要在模块中使用这些方法

...
@NgModule({
    imports: [
        provideFirebaseApp(() => {
    
          const firebaseApp = initializeApp(environment.firebaseConfig)
    
          return (firebaseApp);
    
        }),
        provideAuth(() => {
    
          const auth = getAuth();
    
          if (!environment.production)
            connectAuthEmulator(auth, `http://localhost:9099`)
    
          return (auth);
    
        }),
        provideDatabase( () => {
          
          const db = getDatabase()
        
          if ( !environment.production )
            connectDatabaseEmulator( db, 'localhost' , 9000 );
    
          return ( db );
    
        } ),
        provideFirestore( () => {
  
          const firestore = getFirestore()

          if ( !environment.production )
            connectFirestoreEmulator( firestore, 'localhost' , 8080 );

          return ( firestore );

      } ) ]
      ...

Answer 4

使用“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,
      useValue: environment.production ? undefined : ['localhost', 9000],
    },
    {
      provide: FUNCTIONS_EMULATOR,
      useValue: environment.production ? undefined : ['localhost', 5001],
    },
  ],

另外，请注意您需要哪个模拟器 - “Firestore”和“实时数据库”是Firebase 提供的2 个独立的数据存储。请注意，为了避免混淆，我没有在那里使用数据库这个词......哦，该死。

Answer 5

对于使用不带 compat 模块的 AngularFire v7 的人，您可以找到一个使用模拟器的示例。app.module.ts我使用的是@amgular/firev7.2.1。