Angular Fire Storage无法连接Firebase模拟器，求app.module.ts配置方案

问题根源 #

你当前混用了Angular Fire v17的新模块化API与旧版compat兼容层API的模拟器配置方式。USE_STORAGE_EMULATOR是compat层的配置项，而你在provideStorage中使用的是新模块化的getStorage，两者不兼容，导致模拟器配置未生效。

正确配置方案 #

完全采用新模块化API完成Storage模拟器配置，无需依赖compat层的配置项：

1. 修改AppModule中的Storage配置 #

更新app.module.ts的imports数组，替换原有的provideStorage：

import { connectStorageEmulator, getStorage, provideStorage } from '@angular/fire/storage';
import { environment } from 'src/environments/environment';

// 在imports数组中替换原provideStorage项
provideStorage(() => {
  const storage = getStorage();
  if (!environment.production) {
    connectStorageEmulator(storage, 'localhost', 9199);
  }
  return storage;
}),

同时删除providers数组中的USE_STORAGE_EMULATOR配置：

// 移除这一行
{ provide: USE_STORAGE_EMULATOR, useValue: !environment.production ? ['localhost', 9199] : undefined },

2. 修改StorageService，注入配置好的Storage实例 #

不要在服务中自行创建Storage实例，改为注入Angular Fire提供的已配置实例：

import { Injectable } from '@angular/core';
import { Storage } from '@angular/fire/storage';
import { getBlob, ref } from '@angular/fire/storage';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private storageReference: string = "my-reference";

  constructor(private storage: Storage) {} // 注入Storage实例

  downloadImage(dirRef: string) {
    return getBlob(ref(this.storage, `${this.storageReference}/${dirRef}/image1.jpg`))
        .then(image => {
            const urlCreator = window.URL || window.webkitURL;
            return urlCreator.createObjectURL(image);
        })
  }
}

为什么之前的尝试失效？ #

你之前在provideStorage中添加connectStorageEmulator的代码逻辑是正确的，但两个细节导致失败：

• 未移除compat层的USE_STORAGE_EMULATOR配置，引发API冲突
• 服务中自行调用getStorage(this.app)创建实例，没有使用AppModule中已配置的全局实例

验证方法 #

1. 重启Angular开发服务器和Firebase模拟器
2. 触发Storage操作后，查看浏览器网络请求，确认请求目标为localhost:9199而非生产存储桶域名
3. 打开Firebase模拟器UI的Storage标签，检查是否有对应的请求日志

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