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

我可以直接从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 2

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

请参阅This answer，以了解关于angularfire仓库的问题。示例（从答案中得出）：

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

由于我有几个不同的环境，所以我让条件条件在环境中查找“模拟器”属性，如果它为false或undefined，则返回undefined，而不是查找production属性，如果存在则返回undefined： / p>

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

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

此外，请注意您需要哪个模拟器。您谈论使用Firestore模拟器，然后提及数据库。它们是2个独立的模拟器：firestore模拟器和实时数据库模拟器。我见过很多线程，其中一个人在谈论数据库，而另一个人在谈论Firestore，他们已经有好几天没有意识到了。在某些进口商品（如上述进口商品）中犯错也是一个很容易的错误，所以要小心。

Answer 4

基于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 { }

Answer 5

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

Firebase：

简要说明一下：firebase的配置可以是您的环境中设置的已注册Firebase应用程序（projectId等）的配置：`“ firebase”：{... actual firebase config ......}`或通过API检索。

请不要在前端中的 API密钥和重要信息公开。生产应用程序。

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

角度：

以下是有关 Angular的配置的文章摘录。

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');
  }
}

文章中的注释适用于数据库 / firestore ，而不是功能：

注意：总体概念与其他firebase客户端sdk相同，但语法在实现之间会有所不同。主要目标是实际上只是告诉firebase sdk您要使用该服务指向的其他URL。

角度：为什么要这样？

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

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

将Firebase模拟器与AngularFire结合使用

5 个答案:

Firebase：

角度：