Angular 16中@angular/fire的Storage注入报错：未初始化Firebase应用

你遇到的错误信息：

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

尽管Firestore和Auth功能正常，但Storage注入时无法识别已初始化的默认App，可通过以下方式解决：

解决步骤 #

修改app.module.ts中provideStorage的配置，显式传入已初始化的Firebase App实例：

1. 先导入getApp方法：

import { initializeApp, provideFirebaseApp, getApp } from '@angular/fire/app';

2. 在imports数组中更新provideStorage的配置：

provideStorage(() => getStorage(getApp())),

修改后的完整app.module.ts关键部分：

imports: [
  BrowserModule,
  provideFirebaseApp(() => initializeApp(environment.firebase)),
  provideAuth(() => getAuth()),
  provideFirestore(() => getFirestore()),
  // 显式传入默认App实例，解决Storage关联问题
  provideStorage(() => getStorage(getApp())),
],

原因说明 #

你已经通过provideFirebaseApp完成了默认Firebase App的初始化，但在部分@angular/fire版本中，getStorage()若不传入App实例，可能无法自动关联到已创建的默认App。显式调用getApp()获取实例并传入getStorage()，就能让Storage服务正确绑定到你的Firebase项目。

你的app.component.ts代码无需修改，保持现有注入方式即可。

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