I need to update my app dependencies and code from @angular/fire 6.x to 7.1.0-rc4 in order to access a feature that is not available in the 7.0.x version. I made the necessary changes in my package.json as follows:
"@angular/fire": "~7.1.0-rc.4",
"firebase": "^9.0.0",
After updating the package, I modified my imports from:
import { AngularFirestore } from '@angular/fire';
to
import { AngularFirestore } from '@angular/fire/compat';
My app is built using Ionic5/Angular12 which implies it uses Ivy by default. According to the information found here, I believe I have followed all necessary steps for the upgrade.
However, I encountered the following compilation error:
Module '"@angular/fire/compat"' has no exported member 'AngularFirestore'.ts(2305)
import AngularFirestore
Below 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 {}
Can anyone help me identify what I might be missing?