Angular 18中引入AngularFireFunctions致SSR崩溃求助

针对Angular 18 SSR环境下导入@angular/fire/compat/functions导致的崩溃问题，可按以下步骤排查解决：

1. 对齐@angular/fire与Angular版本 #

你的Angular版本为18.1.2，但@angular/fire仅为18.0.1，小版本差异可能引发兼容性问题。执行以下命令升级@angular/fire到匹配的18.1.x版本：

npm install @angular/fire@^18.1.0

2. 替换Compat导入为官方推荐的非兼容版本 #

compat系列是为适配旧版Angular架构保留的兼容层，在Angular 18的独立应用+SSR环境下存在适配缺陷。建议直接使用最新的Firebase Functions API：

• 移除原导入：

  import { AngularFireFunctions } from '@angular/fire/compat/functions';
  

• 改用新的注入式API：

  import { Component, inject } from '@angular/core';
  import { Functions, httpsCallable } from '@angular/fire/functions';
  
  @Component({
    // 组件配置
  })
  export class YourComponent {
    private functions = inject(Functions);
  
    async callCloudFunction() {
      const myFunction = httpsCallable(this.functions, 'your-cloud-function-name');
      const result = await myFunction({ /* 参数 */ });
      // 处理返回结果
    }
  }
  

• 在应用根提供者中配置Functions：
  在main.ts或server.ts中添加：

  import { provideFunctions, getFunctions } from '@angular/fire/functions';
  
  bootstrapApplication(AppComponent, {
    providers: [
      // 其他Firebase配置（如provideFirebaseApp）
      provideFunctions(() => getFunctions()),
    ]
  });
  

3. 检查SSR环境下的Firebase初始化逻辑 #

确保server.ts中的Firebase初始化代码正确适配服务端环境，避免在服务端执行浏览器专属API：

// server.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './src/app/app.component';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFunctions } from '@angular/fire/functions';
import { environment } from './src/environments/environment';

bootstrapApplication(AppComponent, {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFunctions(),
    // 其他必要提供者
  ]
});

4. 若必须使用Compat版本的临时修复 #

如果因历史代码限制无法替换Compat API，可尝试在server.ts顶部添加File类的polyfill：

import { File } from 'undici';
globalThis.File = File;

但此方法仅为临时 workaround，长期建议迁移到非Compat API。

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