Angular17集成Firebase Storage遇R3InjectorError问题求助

问题现象 #

在Angular 17项目中集成Firebase Storage时，尝试注入AngularFireStorage组件时出现以下错误：

NullInjectorError: No provider for InjectionToken angularfire2.app.options!

完整报错栈：

R3InjectorError(Standalone[_ProfilePageComponent])[_AngularFireStorage -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options
core.mjs:11809 ERROR NullInjectorError: R3InjectorError(Standalone[_ProfilePageComponent])[_AngularFireStorage -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
NullInjectorError: No provider for InjectionToken angularfire2.app.options!

相关配置与代码 #

app.config.ts #

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideFirebaseApp } from '@angular/fire/app';
import { provideAuth } from '@angular/fire/auth';
import { provideFirestore } from '@angular/fire/firestore';
import { provideStorage } from '@angular/fire/storage';
import { provideHttpClient } from '@angular/common/http';
import { app, auth, storage } from './firebase.config';
import { getFirestore } from 'firebase/firestore';
import { HttpClientModule } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    provideAnimations(),
    importProvidersFrom([
      provideFirebaseApp(() => app),
      provideAuth(() => auth),
      provideFirestore(() => getFirestore(app)),
      provideStorage(() => storage),
    ]),
  ],
};

firebase.config.ts #

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getAuth } from 'firebase/auth';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
import { getStorage } from 'firebase/storage';

export const firebaseConfig = {
  apiKey: 'X',
  authDomain: 'X',
  projectId: 'X',
  storageBucket: 'X',
  messagingSenderId: 'X',
  appId: 'X',
  measurementId: 'X',
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const storage = getStorage(app);

组件代码（DriverProfileComponent） #

import { AngularFireStorage } from '@angular/fire/compat/storage';
import { ChangeDetectorRef, OnInit } from '@angular/core';
import { CommonModule, FormsModule } from '@angular/common';

@Component({
  selector: 'app-driver-profile',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
  ],
  templateUrl: './driver-profile.component.html',
  styleUrl: './driver-profile.component.css',
})
export class DriverProfileComponent implements OnInit {
  constructor(
    private storage: AngularFireStorage,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    // 组件初始化逻辑
  }
}

问题根源 #

你使用的@angular/fire/compat/storage是Firebase的兼容层API，依赖传统的AngularFireModule配置方式；而当前项目采用Angular 17独立组件模式，使用的是新的provideFirebaseApp等提供者，两者不兼容。此外，新的@angular/fire/storage已不再导出AngularFireStorage，转而使用Firebase官方原生API。

解决方案 #

方案一：使用Firebase原生Storage API（推荐，适配Angular 17） #

直接使用Firebase官方提供的Storage API，无需依赖AngularFireStorage：

1. 修改组件代码：

import { ChangeDetectorRef, OnInit } from '@angular/core';
import { CommonModule, FormsModule } from '@angular/common';
// 导入Firebase原生Storage API
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { storage } from '../firebase.config'; // 从配置文件导入已初始化的storage实例

@Component({
  selector: 'app-driver-profile',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
  ],
  templateUrl: './driver-profile.component.html',
  styleUrl: './driver-profile.component.css',
})
export class DriverProfileComponent implements OnInit {
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    // 组件初始化逻辑
  }

  // 示例：上传文件并获取下载链接
  async uploadFile(file: File) {
    const fileRef = ref(storage, `uploads/${file.name}`);
    const snapshot = await uploadBytes(fileRef, file);
    const downloadUrl = await getDownloadURL(snapshot.ref);
    console.log('文件下载链接：', downloadUrl);
  }
}

2. 保持app.config.ts中的现有配置不变，当前的provideStorage(() => storage)已正确配置了Storage提供者。

方案二：继续使用Compat兼容层（仅过渡使用） #

如果需要继续使用AngularFireStorage，需添加兼容层的配置：

1. 确保安装了compat依赖：

npm install @angular/fire/compat

2. 修改app.config.ts，添加兼容层模块：

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
// 新增Compat模块导入
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
// ...其他现有导入
import { firebaseConfig } from './firebase.config';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...其他现有提供者
    importProvidersFrom([
      // 添加Compat模块配置
      AngularFireModule.initializeApp(firebaseConfig),
      AngularFireStorageModule,
      // 保留新API的提供者
      provideFirebaseApp(() => app),
      provideAuth(() => auth),
      provideFirestore(() => getFirestore(app)),
      provideStorage(() => storage),
    ]),
  ],
};

注意：这种方式会同时加载新旧两套配置，存在冗余，建议逐步迁移到原生API。

额外检查 #

• 确保DriverProfileComponent的providers数组中没有重复添加Firebase相关服务，避免提供者冲突。
• 确认Firebase配置中的storageBucket字段正确无误。

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