Angular SSR集成Firebase Storage报错：Service storage is not available

问题原因 #

Firebase Storage的Web SDK依赖浏览器专属API（如File、Blob），在Angular SSR的服务端（Node.js）环境下无法正常初始化，直接全局配置provideStorage会触发Service storage is not available initializing the app错误。

解决方案 #

通过区分客户端/服务端环境，仅在浏览器环境下初始化Firebase Storage，服务端返回空对象避免报错：

1. 导入平台判断工具：

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';

2. 修改provideStorage配置：

provideStorage(() => {
  const platformId = inject(PLATFORM_ID);
  if (isPlatformBrowser(platformId)) {
    return getStorage(inject(FirebaseApp));
  }
  // 服务端返回空对象适配SSR环境
  return {} as any;
}),

额外检查项 #

• 修正firebaseConfig语法错误：你提供的配置中locationId字段缺少闭合引号，需改为locationId: ""。
• 确认依赖版本匹配：@angular/fire@18.0.1需搭配firebase@10.x+，可执行npm install firebase确保依赖安装完整。

内容的提问来源于stack exchange，提问作者João 0987