angular - 使用与其他项目中完全相同的代码，类型 'auth' 上不存在属性 'AngularFireAuth'

Question

我知道以前曾有人问过这个问题，但我见过的解决方案都不适合我。我使用 firebase-ui 为我的 ionic 应用程序构建一个登录页面，我使用与其他应用程序完全相同的方法，并且它在那里工作。我安装了 angularFire 和 firebase-ui，并将它们导入到我的 app.module 中，如下所示

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后，在我的 login.ts 文件中，我得到了这个

import { Component, OnInit, NgZone, OnDestroy } from '@angular/core';
import * as firebaseui from 'firebaseui';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import { AngularFireAuth } from '@angular/fire/auth/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit, OnDestroy {
  ui: firebaseui.auth.AuthUI;

  constructor(
    private router: Router,
    private loadingCtrl: LoadingController,
    private afAuth: AngularFireAuth,
    private ngZone: NgZone) { }

  ngOnInit() {
    const uiConfig = {
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      callbacks: {
        signInSuccessWithAuthResult: this.onLoginSuccessful.bind(this)
      }
    };
    this.ui = new firebaseui.auth.AuthUI(this.afAuth.auth); // This line gets the error
    this.ui.start('#firebaseui-auth-container', uiConfig);
  }

  ngOnDestroy() {
    this.ui.delete();
  }
  onLoginSuccessful(result) {
    console.log('Firebase login result: ', result);
    this.ngZone.run(() => {
      this.router.navigateByUrl('/secciones');
    });
  }

}

我之前多次使用过这段代码，并且完全困惑为什么找不到 auth 属性。我已经尝试了一系列代码变体，但由于某种原因有些东西无法正常工作，我将不胜感激任何有关原因的意见。当然，我已经在我的环境中添加了 firebase 配置，并添加了正确的包 "firebase": "^7.10.0"和 "firebaseui": "^4.4.0",

Answer 1

添加马库斯的答案:

更改如下:

const user = this.afAuth.auth.currentUser;

至:

const user = await this.afAuth.currentUser;

但请确保它位于异步函数中。