Angularfire: Calling AngularFireFunctions.httpsCallable results to error 404 because

[algoj]

Version info

Angular: 6.0

Firebase: 5.5.5

AngularFire: 5.1.0

How to reproduce these conditions

I created a service that aims to generate token from 3rd party service and used AngularFireFunctions to call a cloud function.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AngularFireFunctions } from '@angular/fire/functions';

import { CreditCard } from '@core/models';

@Injectable()
export class MagpieTokenService {
  private _generateToken;

  constructor(
    private http: HttpClient,
    private cloudFunctions: AngularFireFunctions
  ) { }

  generate(creditCard: CreditCard): Observable<any> {
    return this.generateToken(creditCard.generateFormValue())
  }

  protected get generateToken() {
    if(this._generateToken == null)
      this._generateToken = this.cloudFunctions.httpsCallable('generateToken');
    return this._generateToken;
  }
}

Now when I try to use the service in my component, error 404 was raised and I noticed that it called
https://null-rik-app.cloudfunctions.net/generateToken.

[achendrick]

The issue seems to come from #1920 (this file) resolving #1874.

To get around it for now, you can do this in your app.module.ts:

providers: [
  { provide: FunctionsRegionToken, useValue: 'us-central1' }
]

[george43g]

Am also experiencing the same issue. It seems to be that it's not setting the region properly (even if left as default) and it's showing 'null' in the URL.

[predorock]

Same problem for me.

Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64
Angular: 6.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.4.7
@angular/cli 6.0.8
@angular/fire 5.1.0
@angular/material 6.4.7
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2
webpack 4.8.3

[karlmnz]

same here ..., getting same as george43g with the url = https://null-mysite-dev.cloudfunctions.net/somefunc

achendrick solution worked for me (but needs angularfire fix)

[algoj]

Thanks @achendrick , it works.

[alberthoekstra]

Are you not getting CORS errors? I do, while localhost is added in the authorised domain list in the firebase console.

I'm testing an Ionic 3 app local (localhost:8100)

[sami6002]

how to resolve the CORS errors? get firestore data doesn't happen, but function

[alberthoekstra]

Don't know yet.

[alberthoekstra]

I resolved it by adding CORS in the functions.

It is documented right here. Link

[sami6002]

@alberthoekstra can you tell me more detail? which file I can change? I can not found the functions.https or express. do I need to install firebase-functions and cors? btw, I use the ngx-admin. thanks so much.
my code just like this https://github.com/angular/angularfire2/blob/master/docs/functions/functions.md

[alberthoekstra]

Sure no problem !
In my case the problem wasnt in the frontend code but in the functions code.

Check this example of Firebase where they created one function that return a CORS response.

In my case I added the CORS package. Then I added this code at the top of the code:

const cors = require('cors')({ origin: true });

Then wrapped the original response in this code.

return cors(req, res, () => {
 // enter existing code here
 });

Hopefully this makes any sense :-)

[smtapp-smtio-cloud]

"AngularFireFunctions is super easy. You create a function on the server side and then "call" it by its name with the client library. This is all I find in terms of documentation for httpsCallable. "

Wondering if there is any other useful documentation than this available for this function.
I would like to make a POST request with multipart/form-data to a cloud function. How do I do this??

[M-Blobby]

I would like to make a POST request with multipart/form-data to a cloud function. How do I do this??

Same question, how to specify POST method ?

[alberthoekstra]

Maybe the docs can answer those?

[M-Blobby]

Sorry, I mean with the client side. My firebase functions is deployed and works well, but I'm searching how to call it from my application with angularfire2:
this.fns.httpsCallable('createNewUser')({ email: email, password: password }) .subscribe(res => { console.log('add user', res); });

From the chrometools I see my request has been send with "OPTIONS" method and return status 400. I'm not familiar with CORS, I'm reading docs about this but if you have any clue ...

EDIT: My problem was cors misunderstood. Your previous comment helped me. Thank you.

[jamesdaniels]

Issue was fixed in the latest patch. Closing this issue but feel free to continue discussion RE CORS and such here.

[alex88]

@jamesdaniels how is this fixed? I've the latest version but with a simple

import * as functions from 'firebase-functions';
export const loadLists = functions.https.onCall((data, context) => {
  return context.auth;
});

and

this.fns.httpsCallable('loadLists')({}).subscribe(response => {
  console.log(response);
});

I still get the OPTIONS request and the CORS error

[mohamedaboelmagd]

The issue seems to come from #1920 (this file) resolving #1874.

To get around it for now, you can do this in your app.module.ts:

providers: [
  { provide: FunctionsRegionToken, useValue: 'us-central1' }
]

for latest version which compatible with angular 8

providers: [
   { provide: FUNCTIONS_ORIGIN, useValue: 'http://localhost:5005' }
  ]

import : [
AngularFireFunctionsModule
]

[francot]

Hi,
with:
Angular: 8.2.14
angular/fire: 6.0.0

I cannot call cloud functions hosted in region different from 'us-central1'.
I try @mohamedaboelmagd solution

providers: [
   { provide: FUNCTIONS_ORIGIN, useValue: 'http://localhost:5005' }
  ]

import : [
AngularFireFunctionsModule
]

But I don't understand where import FUNCTIONS_ORIGIN and why set useValue to 'http://localhost:5005'