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

Question

我知道之前曾有人问过这个问题，但是我所见过的所有解决方案都不适合我。我使用firebase-ui为我的离子应用程序构建了登录页面，我使用的方法与其他应用程序中的方法完全相同，并且可以在其中运行。我安装了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”，

我知道之前曾有人问过这个问题，但是我所见过的所有解决方案都不适合我。我正在使用firebase-ui构建我的离子应用程序的登录页面，我使用的方法与...

Answer 1

您可能正在使用AngularFire的新版本（6.0）。他们删除了auth属性，现在可以对其进行代理。尝试将代码更改为：