将 @angular/fire 从 6.x 升级到 7.x

Question

我正在尝试将我的应用程序依赖项和代码从 @angular/fire 6.x 升级到 7.1.0-rc4 （因为我需要 7.0.x 中不存在的功能），所以我编辑了我的package.json：

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

然后我改变了我的进口：

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

到

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

我的应用程序是 Ionic5/Angular12 应用程序，所以我假设它默认使用 Ivy。看着这里，在我看来，我已经完成了升级所需的一切。

但是我收到以下编译错误：

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

这是我的app.module.ts文件：

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

我缺少什么？

Answer 1

事实证明import，在 的情况下AngularFirestore，必须将版本 7.1 更改为

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