Angular 16 + Firebase 9 文件上传报错求助

报错的核心原因是你在懒加载组件中直接调用getApp()、getStorage()这类AngularFire初始化函数，而非通过Angular的依赖注入系统获取已配置的Storage实例。懒加载模块的初始化时机晚于根模块，直接调用这些函数会导致Angular无法找到已注册的Firebase提供者。

步骤1：修改组件，通过依赖注入获取Storage服务 #

更新contact-us.component.ts，移除手动获取App和Storage的代码，改用依赖注入：

import { AfterViewInit, Component, OnInit, Inject } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Storage, ref, uploadBytes, getDownloadURL } from '@angular/fire/storage'; 

@Component({
  selector: 'app-contact-us',
  templateUrl: './contact-us.component.html',
  styleUrls: ['./contact-us.component.scss']
})
export class ContactUsComponent implements OnInit, AfterViewInit {

  contactForm: any;
  emailId: string = '';
  fileName = '';
  file!: File; 

  constructor(
    private formBuilder: FormBuilder,
    @Inject(Storage) private storage: Storage // 注入已配置的Storage实例
  ) {
  }

  ngOnInit() {
    this.contactForm = this.formBuilder.group({
      // 保留你的原有表单配置
    });

    this.emailId = this.generateUniqueID();
  }


  generateUniqueID(): string {
    return Math.random().toString(36).substr(2, 9) + Date.now();
  }

  onFileChange(event: any) {
    if (event.target.files.length > 0) {
      this.file = event.target.files[0];
      const filePath = `emails/${this.emailId}/${this.file.name}`;

      if (this.file.size > 5242880) {
        alert('File is too large!');
        this.contactForm.get('attachment').setErrors({ 'incorrect': true });
        return;
      } else {
        this.fileName = this.file.name;
        this.contactForm.get('attachment').setValue(this.file);

        const upload = async () => {
          try {
            // 使用注入的storage实例创建存储引用
            const storageRef = ref(this.storage, filePath);
            const snapshot = await uploadBytes(storageRef, this.file);
            const url = await getDownloadURL(storageRef);
            console.log(`Download URL: ${url}`);
          } catch (e) {
            console.error(e);
          }
        };
        upload();
      }
      console.log("filePath: ", filePath);
    }
  }

}

步骤2：清理冗余代码 #

删除contacts.module.ts中无用的导入（这些代码未实际使用，只会增加冗余）：

// 移除以下无效导入
import { getAuth } from '@angular/fire/auth';
import { getFirestore } from '@angular/fire/firestore';
import { getFunctions } from '@angular/fire/functions';
import { getStorage } from '@angular/fire/storage';

AngularFire v7+采用基于提供者的配置方式（provideFirebaseApp、provideStorage等），这些提供者会在根模块中注册已配置好的Firebase服务实例（包括模拟器连接）。通过依赖注入获取Storage，能确保组件使用的是符合Angular生命周期的实例，避免懒加载场景下的初始化时序问题。

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