Upgrading @angular/fire from 6.x to 7.x

Question

I'm trying to upgrade my app dependencies and my code from @angular/fire 6.x to 7.1.0-rc4 (because I need a feature that is not present in 7.0.x) so I edited my package.json with:

"@angular/fire": "~7.1.0-rc.4",
"firebase": "^9.0.0",

then I changed my imports from:

import { AngularFirestore } from '@angular/fire';

to

import { AngularFirestore } from '@angular/fire/compat';

My app is a Ionic5/Angular12 app, so I assume it uses Ivy by default. Looking here, it seems to me I've done everything that was needed to upgrade.

However I get the following compilation error:

Module '"@angular/fire/compat"' has no exported member 'AngularFirestore'.ts(2305)
import AngularFirestore

Here is my app.module.ts file:

import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { APP_INITIALIZER, NgModule, Optional, PLATFORM_ID } from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { ServiceWorkerModule } from '@angular/service-worker';
import { RESPONSE } from '@nguniversal/express-engine/tokens';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';
import { environment } from '../environments/environment';
import { ReactiveFormsModule } from '@angular/forms';

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthGuardModule } from '@angular/fire/compat/auth-guard/';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthGuardModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    IonicModule.forRoot(),
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    ComponentsModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: APP_INITIALIZER,
      deps: [PLATFORM_ID, [new Optional(), RESPONSE]],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

What am I missing?

Answer 1

It turns out the import, in the case of AngularFirestore, has to be changed for version 7.1 to

import { AngularFirestore } from '@angular/fire/compat/firestore';