Angular 14中Firebase Authentication无法导入问题求解

导入路径不存在的本质是依赖版本完全不匹配：

• 你项目里装的@angular/fire@7.4.1要求配套使用9.x版本的firebase，你查到的firebase/compat/app是Firebase 9才新增的兼容层导入路径
• 当前安装的firebase@^7.9.0是旧大版本，根本没有compat目录，自然找不到对应路径
• 额外问题：你同时装了早已废弃的angularfire2@5.4.2，这个旧包和新版@angular/fire会存在全局命名、类型定义冲突，必须先卸载。

1. 清理冲突依赖
   执行命令卸载不兼容的包：

npm uninstall firebase angularfire2
# 如果你用yarn作为包管理工具，执行 yarn remove firebase angularfire2

2. 安装版本匹配的firebase
   @angular/fire@7.x最高兼容到Firebase 9.x系列，不要装10以上版本，否则会出现新的API兼容问题，执行安装：

npm install firebase@^9.23.0 --save
# yarn用户执行 yarn add firebase@^9.23.0

3. 修正导入和代码写法
   安装完成后compat路径就可以正常使用了，注意你原来写的new firebase.authGoogleAuthProvider()是错误写法，正确示例：

// 导入firebase兼容层及auth模块
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

// 正确实例化Google登录提供者
const googleProvider = new firebase.auth.GoogleAuthProvider();

4. （推荐）使用原生模块化写法
   如果不想用兼容层，也可以直接用Firebase 9的模块化API，配合Angular的依赖注入使用，打包体积更小：

import { GoogleAuthProvider } from 'firebase/auth';
import { Auth } from '@angular/fire/auth';

// 在组件/服务的构造函数中注入Auth即可
constructor(private auth: Auth) {
  const googleProvider = new GoogleAuthProvider();
  // 后续登录逻辑直接调用auth实例的方法即可
}

安装完成后打开node_modules/firebase目录，能看到compat子文件夹就说明版本安装正确，导入报错会直接消失。

内容的提问来源于stack exchange，提问作者Robert Green MBA