Angular12+Firebase9使用GoogleAuthProvider实现登录认证报错如何解决

错误原因 #

你的问题来自三个核心错误：

• 代码语法错误：login方法定义前多余的firebase.GoogleAuthProvider().属于书写错误，会直接触发语法报错
• API调用路径错误：你使用的compat兼容模式下，GoogleAuthProvider挂载在firebase.auth命名空间下，不是firebase根命名空间下
• API模式混用：同时导入了compat兼容版firebase和9.x新版模块化的GoogleAuthProvider，两种模式冲突导致调用失败

修复方案 #

提供两种可二选一的修复方式，不要混用两种方案的代码。 #

方案1：全量使用compat兼容模式（适合旧项目迁移场景） #

1. 调整导入语句，删除模块化API的导入，补充compat版auth依赖：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AppUser } from '../models/appuser';
import * as firebase from 'firebase/compat/app';
// 新增compat版auth导入
import 'firebase/compat/auth';

2. 修正登录方法代码，删除多余前缀，修正API调用路径：

async login() { 
  const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || this.router.url; 
  localStorage.setItem('returnUrl', returnUrl); 
  const credential = await this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); 
  return this.updateUserData(credential.user); 
}

方案2：使用Firebase 9 模块化API（适合新项目） #

1. 导入语句保留模块化GoogleAuthProvider导入，删除冗余的compat版firebase全局导入：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AppUser } from '../models/appuser';
import { GoogleAuthProvider } from "firebase/auth";

2. 修正登录方法代码，直接使用导入的Provider实例：

async login() { 
  const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || this.router.url; 
  localStorage.setItem('returnUrl', returnUrl); 
  const credential = await this.afAuth.signInWithPopup(new GoogleAuthProvider()); 
  return this.updateUserData(credential.user); 
}

内容的提问来源于stack exchange，提问作者Yogesh Nikam