AngularFire升级至7.5.0后AppCheck报错：无DEFAULT Firebase应用

版本信息 #

• Angular：15.1.2
• Firebase：9.23.3
• AngularFire：7.5.0
• Node：18.13.0
• 包管理器：yarn 1.22.19
• 操作系统：darwin arm64

问题描述 #

将Angular从12升级到15、AngularFire从7.0.4升到7.5.0后，AppCheck功能失效，控制台抛出错误：

ERROR Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

调试发现getApps()返回空数组，说明Firebase App实例未被正确创建。注释掉AppCheck相关代码后应用可正常运行，但会因缺少AppCheck令牌触发权限异常（符合预期），且旧版本（AngularFire 7.0.4）的配置能正常工作。

问题根源 #

你同时混用了AngularFire旧版初始化方式AngularFireModule.initializeApp和新版的provideFirebaseApp，重复初始化导致Firebase App实例创建逻辑冲突，最终实例未被正确初始化。

正确解决方案 #

步骤1：清理重复初始化代码 #

移除AngularFireModule.initializeApp(environment.firebase)，统一使用AngularFire 7+推荐的基于提供者的初始化方式。

步骤2：正确配置AppCheck #

推荐两种配置方式，按需选择：

方式1：直接复用Firebase App实例

在provideAppCheck的工厂函数中，直接使用initializeApp返回的实例，确保与全局Firebase App一致：

imports: [
  provideFirebaseApp(() => initializeApp(environment.firebase)),
  provideAppCheck(() => {
    const app = initializeApp(environment.firebase);
    const provider = new ReCaptchaV3Provider(environment.recaptcha);
    return initializeAppCheck(app, {
      provider,
      isTokenAutoRefreshEnabled: true,
    });
  })
],

方式2：依赖注入获取FirebaseApp（更符合Angular规范）

通过依赖注入让Angular自动注入已初始化的FirebaseApp实例，避免手动重复创建：

import { FirebaseApp } from '@angular/fire/app';

// ...

imports: [
  provideFirebaseApp(() => initializeApp(environment.firebase)),
  provideAppCheck((app: FirebaseApp) => {
    const provider = new ReCaptchaV3Provider(environment.recaptcha);
    return initializeAppCheck(app, {
      provider,
      isTokenAutoRefreshEnabled: true,
    });
  })
],

步骤3：补充其他Firebase服务配置（可选） #

如果应用用到Firestore、Auth等其他服务，同样用对应的provideXXX函数配置，例如：

provideFirestore(() => getFirestore()),
provideAuth(() => getAuth()),

验证 #

完成配置后重启应用，getApp()不再抛出错误，AppCheck可正常初始化，应用能正常加载且不会出现权限异常。

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