Angular+Firebase部署后组件不加载，报错Uncaught TypeError: n.auth is not a function

以下是针对你遇到的Angular部署后Firebase Auth报错、组件无法加载问题的排查和解决步骤：

• 严格匹配@angular/fire与firebase版本
  @angular/fire和firebase SDK版本必须一一对应，版本不兼容是导致auth is not a function的核心原因之一。比如：

  • Angular 12/13 → @angular/fire 7.x + firebase 9.x
  • Angular 11 → @angular/fire 6.x + firebase 8.x
    先卸载现有版本：

  npm uninstall @angular/fire firebase
  

  然后安装与当前Angular版本匹配的指定版本，例如Angular 14对应：

  npm install @angular/fire@7.4.1 firebase@9.23.0
  

  （版本号可根据Angular官方适配文档调整）

• 修正Firebase Auth初始化代码
  如果你使用的是Firebase v9+模块化语法，不能再使用旧的命名空间调用方式（如firebase.auth()），需改为模块化导入：

  // 正确写法
  import { initializeApp } from 'firebase/app';
  import { getAuth } from 'firebase/auth';
  
  const firebaseConfig = { /* 你的Firebase配置 */ };
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  

  若使用@angular/fire的封装服务，确保通过依赖注入使用AngularFireAuth：

  import { AngularFireAuth } from '@angular/fire/compat/auth';
  
  constructor(private afAuth: AngularFireAuth) {
    // 通过afAuth访问auth相关方法，例如：
    this.afAuth.authState.subscribe(user => { /* 业务逻辑 */ });
  }
  

• 调整生产构建配置，避免Tree-shaking误删Firebase代码
  在angular.json的build.options中添加Firebase脚本引用，防止构建优化时丢失必要模块：

  "build": {
    "options": {
      "scripts": [
        "node_modules/firebase/firebase-app.js",
        "node_modules/firebase/firebase-auth.js",
        "node_modules/firebase/firebase-firestore.js" // 若用到数据库需添加
      ]
    }
  }
  

• 配置Firebase Hosting路由重写
  点击导航链接无变化是因为Angular单页应用的路由需要重写规则，在firebase.json中添加：

  "hosting": {
    "public": "dist/你的应用名称",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
  

• 彻底清理构建缓存并重新部署
  执行以下命令清理构建目录和依赖缓存：

  rm -rf dist node_modules package-lock.json
  npm install
  ng build --prod --delete-output-path
  firebase deploy
  

• 验证生产环境Firebase配置
  确保environment.prod.ts中的firebaseConfig与Firebase控制台的配置完全一致，没有遗漏apiKey、authDomain等关键字段。

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