Angular Firebase集成Facebook登录时出现FacebookAuthProvider未定义错误

嘿，这个错误我之前也踩过坑，本质就是你调用FacebookAuthProvider的时候，它所属的上下文是未定义的，大概率是Firebase Auth模块没正确导入或者初始化导致的，我给你几个具体的排查和解决方向：

1. 检查Firebase Auth的导入方式是否正确 #

Firebase从v9开始改成了模块化导入，和旧版本的命名空间写法差异很大，你得根据自己的Firebase版本调整：

• 如果是Firebase v9+（推荐的新版本）：
  在auth.service.ts里直接导入所需的方法和类：

  import { Injectable } from '@angular/core';
  import { getAuth, signInWithPopup, FacebookAuthProvider } from "@angular/fire/auth";
  
  @Injectable({ providedIn: 'root' })
  export class AuthService {
    private authInstance = getAuth(); // 初始化Auth实例
  
    signInWithFacebook() {
      const fbProvider = new FacebookAuthProvider();
      // 可以在这里添加额外权限，比如获取用户邮箱
      fbProvider.addScope('email');
      return signInWithPopup(this.authInstance, fbProvider);
    }
  }
  

• 如果是Firebase v8及以下（旧版本）：
  必须导入firebase的auth模块，通过命名空间访问：

  import * as firebase from 'firebase/app';
  import 'firebase/auth'; // 这行不能少，否则auth相关API不可用
  
  @Injectable({ providedIn: 'root' })
  export class AuthService {
    signInWithFacebook() {
      const fbProvider = new firebase.auth.FacebookAuthProvider();
      return firebase.auth().signInWithPopup(fbProvider);
    }
  }
  

2. 确认Angular Fire的配置是否完整 #

在app.module.ts里，一定要确保导入并初始化了AngularFireAuth模块，这是Angular集成Firebase Auth的核心：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { environment } from '../environments/environment'; // 你的Firebase配置文件

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase), // 初始化Firebase应用
    AngularFireAuthModule // 导入Auth模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 检查依赖是否安装正确 #

确保你安装了版本匹配的@angular/fire和firebase，可以通过以下命令安装或更新：

npm install @angular/fire firebase

注意：@angular/fire的版本要和你的Angular版本对应，比如Angular 16对应@angular/fire 7.x版本，避免版本不兼容导致的问题。

最后排查代码调用逻辑 #

确保在AppComponent里调用方法时，AuthService已经被正确注入：

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private authService: AuthService) {}

  signInWithFacebook() {
    this.authService.signInWithFacebook()
      .then(result => {
        // 处理登录成功逻辑，比如获取用户信息
        console.log('登录成功', result.user);
      })
      .catch(error => {
        // 处理登录错误
        console.error('登录失败', error);
      });
  }
}

按照上面的步骤逐一检查，应该就能解决这个Cannot read property 'FacebookAuthProvider' of undefined的错误了。

内容的提问来源于stack exchange，提问作者N.Bar