Currently, I am utilizing Angular v16 alongside Angular Fire v16 and Firebase v9. Following the instructions, I completed all the necessary setup steps including executing firebase login, firebase init, and converting the functions to typescript.
Next, within my app.module.ts file, I imported AngularFireFunctionsModule:
imports: [
BrowserModule,
CommonModule,
HttpClientModule,
FormsModule,
FontAwesomeModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireFunctionsModule, //imported here
AngularFireAuthModule,
AngularFirestoreModule,
AngularFireStorageModule,
AngularFireDatabaseModule,
],
For testing purposes, I created a simple index.ts file with the following content:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.callMe = functions.https.onCall((data, context) => {
return data.name
});
After deploying using firebase deploy, everything seemed to work fine as confirmed on the console website.
In order to call these functions, I have created a service called bubbleService:
import { Injectable, NgZone } from '@angular/core';
...
...
import { AngularFireFunctions } from '@angular/fire/compat/functions';
@Injectable({
providedIn: 'root'
})
export class BubbleService {
constructor(
...
public functions: AngularFireFunctions
) { }
callFunction(name: string): Promise<string> {
const callable = this.functions.httpsCallable('callMe');
return callable({ name }).toPromise().then((result) => {
return result.data as string;
}).catch((error) => {
console.error('Error calling function:', error);
throw error;
});
}
....
This service is then utilized by my component:
this.bubbleService.callFunction('John Doe').then((data) => {
alert(data);
}).catch((error) => {
console.error('Failed to fetch greeting:', error);
});
However, upon running the application, an error message appears in the web console:
Error calling function: TypeError: app.functions is not a function
I have made attempts with various versions of Angular Fire without success. The nature of this error confuses me, leaving me unsure of the next steps to take.