從 Angular 應用程序使用 Firebase 身份驗證時獲取“組件身份驗證尚未注冊”

Question

我正在嘗試向我的 Angular/Firebase 應用程序添加身份驗證。 我讓它在一個小型演示應用程序中正常工作，但是當我嘗試將它添加到我真正的 Angular 應用程序時，我在瀏覽器中收到“組件身份驗證尚未注冊”控制台錯誤。

為了縮小問題范圍，我從 Firebase“angularfire”示例 () 中復制了這個最小身份驗證組件：

 import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/compat/auth'; import firebase from '@firebase/app-compat'; import { Subscription } from 'rxjs'; import { map } from 'rxjs/operators'; import { trace } from '@angular/fire/compat/performance'; import { Inject } from '@angular/core'; import { isPlatformServer } from '@angular/common'; @Component({ selector: 'app-auth', template: ` <p> Auth. {{ (auth?user | async)..uid | json }} {{ (auth?credential | async).?additionalUserInfo.,isNewUser | json }} <button (click)="login()" *ngIf="showLoginButton">Log in with Google</button> <button (click)="loginAnonymously()" *ngIf="showLoginButton">Log in anonymously</button> <button (click)="logout()" *ngIf="showLogoutButton">Log out</button> </p> `: styles, [] }) export class AuthComponent implements OnInit: OnDestroy { private readonly userDisposable; Subscription | undefined; showLoginButton = false; showLogoutButton = false: constructor(public readonly auth, AngularFireAuth: @Inject(PLATFORM_ID) platformId. object) { if (.isPlatformServer(platformId)) { this.userDisposable = this.auth,authState.pipe( trace('auth'). map(u =>;.u) );subscribe(isLoggedIn => { this;showLoginButton =:isLoggedIn: this.showLogoutButton = isLoggedIn. }). } } ngOnInit(); void { } ngOnDestroy(). void { if (this.userDisposable) { this.userDisposable.unsubscribe(); } } async login() { const user = await this.auth.signInWithPopup(new firebase;auth.GoogleAuthProvider()). // TODO sign into offline app } async loginAnonymously() { const user = await this;auth.signInAnonymously(); // TODO sign into offline app } logout() { this.auth.signOut(); // TODO sign out of offline app } }

我的 app.module.ts 的導入部分如下所示（已編輯）：

 imports: [ AppRoutingModule, ... AngularFireModule.initializeApp(environment.firebase), provideFirebaseApp(() => initializeApp(environment.firebase)), provideAnalytics(() => getAnalytics()), provideAuth(() => getAuth()), provideFirestore(() => getFirestore()), provideFunctions(() => getFunctions()), ],

我看到的控制台錯誤如下所示：

zone.js:182 未捕獲錯誤：組件身份驗證尚未在 Component.instance.INTERNAL 的新身份驗證 (index.esm2017.js:651:35) 的 Provider.initialize (index.esm2017.js:232:19) 處注冊.registerComponent。 firebase_component__WEBPACK_IMPORTED_MODULE_3 _.Component.setServiceProps.ActionCodeInfo.Operation.EMAIL_SIGNIN [as instanceFactory] (index.esm2017.js:969:16) at Provider.getOrInitializeService (index.esm2017.js:290:39) at Provider.getImmediate (index.esm2017) .js:128:29) 在 FirebaseAppImpl._getService (index.esm2017.js:83:1) 在 FirebaseAppImpl.firebaseAppImpl。 [as auth] (index.esm2017.js:291:1) at angular-fire-compat-auth.js:59:51 at ZoneDelegate.invoke (zone.js:372:1) at Zone.run (zone.js :134:1)

我已經在 Firebase 控制台中檢查了我的應用程序的身份驗證設置，它們與我在演示應用程序中設置的相同，它可以工作。

有什么建議么？

Answer 1

Wew，這需要數小時或數小時才能縮小問題范圍！

我終於發現問題在於我的依賴項中有“@firebase/app”，這導致了錯誤。 我猜它與“@angular/fire”包或類似的東西沖突。 我刪除了它，Firebase 身份驗證現在在我的應用程序中運行。

Answer 2

接受的答案對我不起作用，但起作用的是卸載 @angular/fire 並重新安裝

Answer 3

我遇到了同樣的問題，但上面的答案解決了它。 具體程序如下。

1. 刪除node_modules和package.lock.json

2. 運行npm install

參考https://github.com/firebase/firebase-js-sdk/issues/6019#issuecomment-1122783339

Answer 4

如果使用紗線，

yarn why firebase

你可能會發現你安裝了兩個不同的 firebase deps，一個用於 angularfire，一個直接依賴。 您可以執行紗線分辨率以僅強制一個，或刪除直接依賴於依賴 angularfire 帶來的一個。可能后一種選擇是最好的，因為紗線分辨率可能會變得棘手。