Angular16+Angular Fire16调用云函数报错：app.functions is not a function

核心修复方案 #

1. 确认Firebase初始化及模块配置正确 #

如果使用NgModule模式，确保app.module.ts中同时导入初始化核心模块和云函数模块：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireFunctionsModule
  ]
})
export class AppModule { }

如果是独立组件模式（Angular 14+），需要在app.config.ts中配置对应的提供者：

import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFunctions, getFunctions } from '@angular/fire/functions';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFunctions(() => getFunctions())
  ]
};

2. 统一API调用风格，避免版本冲突 #

Angular Fire v16对应Firebase v9，不要混用模块化API和compat兼容API：

• 模块化API（推荐）：

// BubbleService.ts
import { Injectable, inject } from '@angular/core';
import { Functions, httpsCallable } from '@angular/fire/functions';

@Injectable({ providedIn: 'root' })
export class BubbleService {
  private functions = inject(Functions);

  callCloudFunction() {
    const callMe = httpsCallable(this.functions, 'callMe');
    callMe({ /* 传入函数参数 */ })
      .subscribe({
        next: res => console.log('调用成功:', res),
        error: err => console.error('调用失败:', err)
      });
  }
}

• Compat兼容API：

// BubbleService.ts
import { Injectable } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/compat/functions';

@Injectable({ providedIn: 'root' })
export class BubbleService {
  constructor(private afFunctions: AngularFireFunctions) {}

  callCloudFunction() {
    const callMe = this.afFunctions.httpsCallable('callMe');
    callMe({ /* 传入函数参数 */ })
      .subscribe({
        next: res => console.log('调用成功:', res),
        error: err => console.error('调用失败:', err)
      });
  }
}

3. 验证环境配置与依赖完整性 #

• 检查environment.ts中的Firebase配置（projectId、apiKey等）是否与Firebase控制台完全一致，错误的项目ID会导致无法定位云函数。
• 清理依赖缓存并重装，解决潜在的版本冲突：

rm -rf node_modules package-lock.json
npm install

4. 确认云函数部署状态 #

确保callMe函数已成功部署到Firebase控制台，且函数名称完全匹配（注意大小写，云函数名称区分大小写）。

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