Angular Fire Storage使用报错：未创建DEFAULT Firebase应用

核心问题分析 #

报错原因是Firebase应用初始化完成前，代码就尝试访问了Storage实例。你使用了Angular Fire的新提供器API（provideFirebaseApp等），但服务中注入Storage的时机过早，或注入方式不符合Angular Fire的依赖注入规范。

解决方案步骤 #

1. 修正服务中的注入方式 #

不要在类字段中直接调用inject(Storage)，将注入逻辑移至构造函数中，确保Angular的DI系统完全初始化后再获取Storage实例：

import { Injectable, inject } from '@angular/core';
import { Storage } from '@angular/fire/storage'; // 必须从@angular/fire/storage导入

@Injectable({
  providedIn: 'root' // 推荐使用root级提供，避免提前实例化
})
export class YourStorageService {
  private storage: Storage;

  constructor() {
    this.storage = inject(Storage);
    // 也可以直接通过构造函数注入：constructor(private storage: Storage) {}
  }

  // 示例Storage操作方法
  uploadFile(path: string, file: File) {
    return this.storage.ref(path).put(file);
  }
}

2. 确认Firebase配置完整性 #

检查firebaseConfig是否包含所有必填项：apiKey、authDomain、projectId、storageBucket等。可在app.module.ts中临时添加日志验证配置：

// app.module.ts中添加，验证后可删除
console.log('Firebase Config:', firebaseConfig);

3. 避免服务提前实例化 #

如果你的服务被用于APP_INITIALIZER、路由守卫等应用启动阶段的逻辑，需要确保Firebase初始化完成后再执行相关代码。可将Firebase初始化包装为APP_INITIALIZER：

// app.module.ts
import { APP_INITIALIZER } from '@angular/core';
import { initializeApp } from '@angular/fire/app';
import { firebaseConfig } from '../environments/firebase-config';

// 定义Firebase初始化函数
export function initFirebase() {
  return () => initializeApp(firebaseConfig);
}

@NgModule({
  // ...其他声明、导入配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initFirebase,
      multi: true
    },
    FireDBService, 
    AuthService
  ]
})
export class AppModule {}

4. 验证版本兼容性 #

你的@angular/fire@7.6.1与firebase@10.3.1版本兼容（Angular 16对应@angular/fire 7.x，Firebase 9.x-10.x），无需调整版本，但注意不要混合使用compat和新API。

旧compat方式生效的原因 #

旧的firebase/compat/app是全局同步初始化Firebase应用，会在Angular模块加载前完成初始化，因此不会出现时机问题。但这种方式不符合Angular的DI设计，推荐使用新的提供器API。

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