从 Angular 应用程序使用 Firebase 身份验证时获取“组件身份验证尚未注册”

Question

从 Angular 应用程序使用 Firebase 身份验证时获取“组件身份验证尚未注册”

我正在尝试向我的 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
  }

}

Run Code Online (Sandbox Code Playgroud)

我的 app.module.ts 的导入部分如下所示（已编辑）：

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

Run Code Online (Sandbox Code Playgroud)

我看到的控制台错误如下所示：

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 [作为 instanceFactory] (index.esm2017.js:969:16) 在 Provider.getOrInitializeService (index.esm2017.js:290:39) 在 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 控制台中检查了我的应用程序的身份验证设置，它们与我在演示应用程序中设置的内容相同，并且有效。

有什么建议么？