最新版@angular/fire报错：未创建[DEFAULT] Firebase App实例

问题触发的核心原因 #

该报错是升级到@angular/fire非compat的模块化API后的典型适配问题，主要有两个常见触发点：

1. 新版本@angular/fire的provideAuth/provideFirestore工厂函数中，直接调用无参数的getAuth()/getFirestore()时，会优先读取全局已初始化的Firebase实例，但Angular的Provider初始化顺序可能导致provideFirebaseApp的初始化逻辑晚于这两个Provider的工厂函数执行，此时无默认实例就会抛出错误。
2. 业务代码中存在在Firebase App初始化完成前就调用getAuth()/getFirestore()/getApp()的逻辑，比如构造函数中直接调用、ROOT_INITIALIZER等提前执行的初始化逻辑里调用了Firebase相关API。
3. window['firebase_config']配置未在Angular模块初始化前完成挂载，导致initializeApp执行时参数为空，没有成功生成默认App实例。

修复方案 #

• 显式绑定Firebase App实例到Auth、Firestore初始化逻辑
  调整Provider写法，主动将初始化完成的Firebase App传入getAuth和getFirestore，确保初始化顺序正确：

  // ...
  import {getAuth, provideAuth} from '@angular/fire/auth';
  import {getFirestore, provideFirestore} from '@angular/fire/firestore';
  import {initializeApp, provideFirebaseApp, FirebaseApp} from '@angular/fire/app';
  // ...
  
  @NgModule({
    // ...
    providers: [
      // ...
      provideFirebaseApp(() => initializeApp(window['firebase_config'])),
      // 调整为注入已初始化的FirebaseApp实例后再初始化对应服务
      provideAuth((app: FirebaseApp) => getAuth(app)),
      provideFirestore((app: FirebaseApp) => getFirestore(app)),
      // ...
    ],
    // ...
  })
  export class ApModule {
    // ...
  }
  

• 排查提前调用Firebase API的逻辑
  检查是否存在以下场景代码，如有调整为确认Firebase App初始化完成后再执行：
  • 模块构造函数、APP_INITIALIZER中直接调用无参数的getAuth()等Firebase API
  • 全局作用域下（类定义外）直接调用getAuth()/getApp()生成全局实例
• 确认配置加载时机
  检查window['firebase_config']的挂载逻辑，确保该配置在Angular应用启动前就已完成挂载，比如将配置挂载逻辑写在index.html头部的同步script标签中。

内容的提问来源于stack exchange，提问作者Bart van den Burg