Cannot find how to pass firestore settings using a new modular API

Version info

Angular: 12.1.1

Firebase: 9.1.3

AngularFire: 7.1.0

With old API, we could pass settings (for example ignoreUndefinedProperties: true) into firestore using provider FIRESTORE_SETTINGS as folowing:

import {SETTINGS as FIRESTORE_SETTINGS} from '@angular/fire/compat/firestore';

@NgModule({
      imports: [
        AngularFireModule.initializeApp(environment.firebaseConfig, 'My-App'),
      ],
      providers: [
        // ...
        {
          provide: FIRESTORE_SETTINGS,
          useValue: { ignoreUndefinedProperties: true }
        },
      ]
})

After consulting documentation and source code of angularfire I coundn’t find the way to do the same with new modular API:

@NgModule({
  imports: [
    // ...
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => {
      const firestore = getFirestore();
      if (!environment.production) {
        connectFirestoreEmulator(firestore, 'localhost', 8080);
      }
      return firestore;
    }),
  ]
})

[hosuaby]

@skog-newglue looks like you are mixing new and old API. Start by removing everything imported from @angular/fire/compat/* :

import { environment } from '../environments/environment';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { initializeFirestore, provideFirestore } from '@angular/fire/firestore';
import { initializeAppCheck, provideAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => initializeFirestore(getApp(), { ignoreUndefinedProperties: true })), // Not working
    provideAppCheck(() =>
      initializeAppCheck(getApp(), { provider: new ReCaptchaV3Provider(environment.recaptchaSiteKey), isTokenAutoRefreshEnabled: true })
    ),
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

And in your client code use:

constructor(private readonly firestore: Firestore) {
  // ...
}

[hosuaby]

@anisabboud this code works. Thanks!