Angular 16.2.0 中“firebase/auth”和“firebase/firestore”中出现 Angularfire 错误

Question

我在 Angular 项目中使用了 Angularfire，当将 Angular 版本更新到 16.2.0 时，“firebase/auth”和“firebase/firestore”抛出了几个错误。然后我进行了全新安装，安装后就发生了同样的事情

@angular/fire

。

版本信息 角度：16.2.0

Firebase：10.4.0

AngularFire：7.6.1

SO：Windows 10

依赖关系：

"dependencies": { "@angular/animations": "^16.2.0", "@angular/cdk": "^16.2.6", "@angular/common": "^16.2.0", "@angular/compiler": "^16.2.0", "@angular/core": "^16.2.0", "@angular/fire": "^7.6.1", "@angular/forms": "^16.2.0", "@angular/material": "^16.2.6", "@angular/platform-browser": "^16.2.0", "@angular/platform-browser-dynamic": "^16.2.0", "@angular/router": "^16.2.0", "@ngrx/effects": "^16.2.0", "@ngrx/entity": "^16.2.0", "@ngrx/store": "^16.2.0", "@ngrx/store-devtools": "^16.2.0", "firebase": "^10.4.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" },

错误：

 `./node_modules/rxfire/auth/index.esm.js:28:22-40 - Error: export 'onAuthStateChanged' (imported as 'onAuthStateChanged') was not found in 'firebase/auth' (module has no exports)

./node_modules/rxfire/auth/index.esm.js:41:22-38 - Error: export 'onIdTokenChanged' (imported as 'onIdTokenChanged') was not found in 'firebase/auth' (module has no exports)

./node_modules/rxfire/auth/index.esm.js:54:23-33 - Error: export 'getIdToken' (imported as 'getIdToken') was not found in 'firebase/auth' (module has no exports)

./node_modules/rxfire/firestore/index.esm.js:69:22-32 - Error: export 'onSnapshot' (imported as 'onSnapshot')
was not found in 'firebase/firestore' (module has no exports)

./node_modules/rxfire/firestore/index.esm.js:184:39-47 - Error: export 'refEqual' (imported as 'refEqual') was not found in 'firebase/firestore' (module has no exports)

./node_modules/rxfire/firestore/index.esm.js:189:47-55 - Error: export 'refEqual' (imported as 'refEqual') was not found in 'firebase/firestore' (module has no exports)

./node_modules/rxfire/firestore/index.esm.js:203:39-47 - Error: export 'refEqual' (imported as 'refEqual') was not found in 'firebase/firestore' (module has no exports)

./node_modules/rxfire/firestore/index.esm.js:280:17-25 - Error: export 'refEqual' (imported as 'refEqual') was not found in 'firebase/firestore' (module has no exports)

./node_modules/rxfire/firestore/index.esm.js:290:19-27 - Error: export 'refEqual' (imported as 'refEqual') was not found in 'firebase/firestore' (module has no exports)

./node_modules/rxfire/firestore/index.esm.js:358:14-32 - Error: export 'getCountFromServer' (imported as 'getCountFromServer') was not found in 'firebase/firestore' (module has no exports)````



To verify the cause of the problem, I performed an installation on a clean project and the error appeared again. As soon as I uninstall `@angular/fire` the issue disappears. If I reinstall the package, the error remains.

Answer 1

它应该是这样的： “firebase”：“^9.16.0”， “@角度/火”：“^7.6.1”，

请注意，根据 Angular/Fire 文档，7.6 支持 Firebase 9

//Firebase
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAnalytics, getAnalytics } from '@angular/fire/analytics';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideFunctions, getFunctions } from '@angular/fire/functions';
import { provideMessaging, getMessaging } from '@angular/fire/messaging';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFireModule } from '@angular/fire/compat';
mports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    //Firebase
    AngularFireModule.initializeApp(environment.firebase), //work around for fireauth https://github.com/angular/angularfire/issues/3079
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    provideStorage(() => getStorage()),
    AngularFireStorageModule,