Firebase Cloud Storage仅生产环境无法正常工作问题

排查与修复步骤 #

1. 显式导入AngularFireStorage模块 #

生产构建的摇树优化会自动移除未被引用的代码，哪怕你在服务里注入了Storage，如果根模块没导入对应的模块，也会被优化掉。打开app.module.ts，添加AngularFireStorageModule的导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireStorageModule // 必须添加这一行
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 阻止摇树优化误删Firebase代码 #

如果导入模块后还是不行，就在angular.json的生产配置里添加允许的CommonJS依赖，避免Firebase Storage相关代码被误删：
找到projects -> [你的项目名] -> architect -> build -> configurations -> production下的options，加入：

"allowedCommonJsDependencies": [
  "@angular/fire/storage",
  "firebase/storage"
]

或者在package.json里添加sideEffects标记：

"sideEffects": [
  "node_modules/@angular/fire/**/*",
  "node_modules/firebase/**/*"
]

3. 确保Firebase先于应用初始化 #

有时候服务构造函数执行时Firebase还没初始化完成，导致找不到Storage服务。可以用APP_INITIALIZER强制Firebase先加载：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';

function initFirebase() {
  return () => AngularFireModule.initializeApp(environment.firebase);
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initFirebase,
      multi: true
    }
  ]
})
export class AppModule { }

4. 核对生产环境Firebase配置 #

再检查一遍environment.prod.ts里的storageBucket字段，有没有拼写错误，比如桶名的大小写、后缀是否正确：

export const environment = {
  production: true,
  firebase: {
    // ...其他配置
    storageBucket: "你的项目存储桶地址" // 务必确认这个字段正确
  }
};

5. 检查SDK版本兼容性 #

@angular/fire和firebase的版本必须匹配，不兼容的版本会导致生产环境出问题。打开package.json核对版本，比如：

"dependencies": {
  "@angular/fire": "^7.6.x",
  "firebase": "^9.23.x"
}

如果版本不匹配，更新到官方推荐的兼容版本。

内容的提问来源于stack exchange，提问作者Alejandro Gómez