@angular/fire部署Netlify报ye.auth is not a function错误如何解决

问题表现 #

• 本地开发环境运行Angular+Firebase身份认证功能无任何异常
• 部署到Netlify平台后，控制台抛出错误：Uncaught TypeError: ye.auth is not a function
• 本地执行生产构建后，触发登录操作时同样会复现该错误
  

根因 #

生产环境构建会压缩混淆代码，此时如果Firebase Auth模块未正确注册、导入写法不兼容就会触发该报错。Firebase JS SDK v9及以上版本混用新旧导入语法，或者构建时Tree Shaking（摇树优化）误移除Auth相关依赖，是该问题的最常见诱因。

修复步骤 #

• 修正Firebase导入写法，v9版本优先使用标准模块化导入，禁止漏导入对应模块直接调用方法：
  错误写法示例：

import firebase from 'firebase/compat/app';
// 未导入auth模块就直接调用auth方法
const auth = firebase.auth();

标准模块化正确写法：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(你的Firebase配置对象);
const auth = getAuth(app);

若要沿用旧版compat兼容写法，必须显式导入auth兼容包，避免被摇树优化移除：

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'; // 该行不可省略，否则生产构建会丢失auth相关代码

firebase.initializeApp(你的Firebase配置对象);
const auth = firebase.auth();

• 检查Angular生产构建配置，打开angular.json找到production配置段，确认脚本优化配置正常，未手动排除Firebase相关依赖：

"production": {
  "optimization": {
    "scripts": true,
    "styles": true,
    "fonts": true
  }
}

• 在项目根目录新增netlify.toml配置文件，明确指定构建命令和产物发布目录，避免Netlify默认构建逻辑异常处理依赖：

[build]
  command = "ng build --configuration production"
  publish = "dist/你的Angular项目名称"

• 本地执行ng build --configuration production，验证构建产物运行、登录操作无报错后，重新推送代码部署到Netlify即可。

内容的提问来源于stack exchange，提问作者Tom Cockram