【Angular】@angular/fire/functions が動かない場合の対処方法

@angular/fire v5でCloud Functionsが使えるAPIが追加されました。

早速ドキュメントどおりに使ってみたんですが動かない。

httpsCallable を呼ぶとエラーになります。

https://null-[projectId].cloudfunctions.net/someFunction

Access to fetch at 'https://null-[projectId].cloudfunctions.net/someFunction' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

エラー内容を見るとCloud FunctionsのAPIエンドポイントがうまく設定できてない模様です。
「null-」が頭についてる。

@angular/fire/functionsのSpecを見ると、Functionsのリージョン指定が出来るようです。

import { AngularFireFunctions, AngularFireFunctionsModule, FunctionsRegionToken } from '@angular/fire/functions';

...

      providers: [
        ...
        // これじゃね…
        { provide: FunctionsRegionToken, useValue: 'asia-northeast1' },
      ]

なので、NgModuleのprovidersに以下を追加しました。

import { AngularFireFunctionsModule, FunctionsRegionToken } from '@angular/fire/functions'; // FunctionsRegionTokenを追加

...
  providers: [
    { provide: FunctionsRegionToken, useValue: 'us-central1' }, // 関数がデプロイされているリージョンを追加
  ]

動きましたとさ、おしまい。