升级依赖后Angular应用报错：Firebase App [DEFAULT]未初始化

问题背景 #

将rxfire从6.0.3升级到6.0.4、firebase从9.23.0升级到10.3.0后，Angular应用无法启动。尝试回退旧版本（执行npm install rxfire@6.0.3、npm install firebase@9.23.0），删除node_modules并重新npm install，错误仍存在；后续重新执行ng add @angular/fire关联项目，问题依旧。

报错信息 #

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

当前配置代码（app.module.ts） #

import { NgModule } from '@angular/core';
...import lots more modules...
// AngularFire modules
import { environment } from '../environments/environment';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideAnalytics, getAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideFunctions, getFunctions } from '@angular/fire/functions';
import { providePerformance, getPerformance } from '@angular/fire/performance';

@NgModule({
  declarations: [
    ...lots of components...
  ],
  imports: [
    // Firebase modules
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    providePerformance(() => getPerformance()),
    provideStorage(() => getStorage()),
    // Angular modules
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    ...lots more modules...
  ],
  providers: [
   ...a few services...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

疑问点 #

1. 错误提示要求将initializeApp(environment.firebase)置于最上方，但它已经在imports数组顶部，为什么仍报错？
2. 错误提到的[DEFAULT] Firebase App和Firebase项目（项目名为LanguageTwo）是什么关系？

当前环境依赖版本 #

• Angular 16.2.1 / 16.2.2
• @angular/fire@7.6.1
• firebase@10.3.0（回退后为9.23.0）
• firebase-admin@11.10.1
• rxfire@6.0.4（回退后为6.0.3）
• rxjs@7.8.1
• typescript@5.1.6

解决方案建议 #

1. 检查依赖版本兼容性 #

@angular/fire和firebase版本必须严格匹配：

• @angular/fire@7.x 仅兼容firebase@9.x版本，不支持firebase@10.x。回退firebase到9.x后，需确认没有残留高版本依赖：

  npm ls firebase
  

  若存在不一致依赖，执行：

  npm dedupe
  

2. 排查提前调用Firebase服务的情况 #

错误通常是因为在Firebase App初始化完成前就调用了Firebase服务（比如在服务构造函数、组件ngOnInit或更早生命周期中直接调用getAuth()、getFirestore()等）：

• 检查所有自定义服务/组件，确保Firebase服务调用在App初始化完成后进行，比如通过Angular依赖注入获取服务实例，而非直接调用getXXX()方法。

3. 清理构建缓存 #

Angular缓存可能导致旧代码残留：

ng clean
npm cache clean --force

之后重新安装依赖并构建：

rm -rf node_modules package-lock.json
npm install
ng build

4. 确认environment配置正确性 #

检查environment.firebase是否完整包含apiKey、authDomain、projectId、storageBucket、messagingSenderId、appId等字段，且值与Firebase项目控制台配置一致。

5. Firebase App与项目的关系 #

Firebase项目是云端资源集合，Firebase App是项目下创建的具体应用实例（如Web、iOS应用）。每个未指定自定义名称的Firebase App会默认使用[DEFAULT]标识符，你的Firebase项目LanguageTwo下的Web应用就是这里的[DEFAULT] App，只要初始化配置正确，两者是关联的。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe