Using Firebase emulator with AngularFire

Question

I am trying to use the freshly introduced Firestore emulator in my Angular7 application.

According to this documentation, I run the dev server on 127.0.0.1:8080 with :

firebase serve --only firestore 

Then, after ng serve, how can I make my AngularFire module use the database emulator ?

I tried the following in my environment.ts :

export const environment = {   production: false,   name: 'local',   firebase: {     databaseURL: "http://127.0.0.1:8080"   } }; 

But it does not work since it needs a "projectId". I tried to set it to my pre-production Firestore database, but then the dev server is not used.

Any thought about it ?

Here is my 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

I got it working by adding a provider in the main app module that overrides some of the variables set by the environment file.

See This answer to an issue at the angularfire repo. Example (from the answer):

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

As i have a couple of different environments, I let the conditional look for an 'emulator' attribute in the environment and return undefined if it's false or undefined, instead of looking for the production attribute and returning undefined if it's present:

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

Update as of AngularFire v6.x.x:

FirestoreSettingsToken has changed to SETTINGS in @angular/fire/firestore module

Answer 2

I'm able to run it directly from environment.ts file without raising any errors.

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