ng serve
で動作している際は問題なく、buildしてそこから起動すると以下のようなエラーが出ました。
ERROR Tr {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly."}
ERROR Error: Uncaught (in promise): Error: Your API key is invalid, please check you have copied it correctly.
![D8E6DB7221E95C778BA8A0335903CAB9.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F39233%2F49200c06-7f2a-dca6-6c94-14d50cc5c9b9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5d728d762c72f388033217ef931bde86)
firebaseの設定も特に問題なくキーなどが間違っているということもありません。
解決には以下のissueがヒントになりました。
https://github.com/firebase/quickstart-js/issues/145
Angularfire2ではenvironment.tsにキーを記載するようにドキュメントに書かれているのでその通りに従っています。
なのでenvironment.tsに記述するのですが、HMR用にenvironment.hmr.tsや本番用にenvironment.prod.tsなどと複数のファイルにまたがっていて、同じ記述を複数の箇所にする必要があります。
なので一つのファイルにキーをまとめてそれをimportするようにしていました。
export default {
apiKey: "xxx-xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx.firebaseio.com",
projectId: "xxx",
storageBucket: "xxx.appspot.com",
messagingSenderId: "xxx"
};
import firebase from './firebase';
export const environment = {
production: true,
hmr: false,
firebase
};
このようにしていたのですがこれだと前述したエラーが発生しました。
ネットワークのリクエストを見る感じFirebaseへリクエストをかけて認証が弾かれたのでエラーを出しているという感じではなく一切のリクエストをせずにエラーが出ているようでした。
何らかの静的解析で弾かれているだろうということで、一旦importではなく直接以下のように変更したところ問題なく動作するようになりました。
import firebase from './firebase';
export const environment = {
production: true,
hmr: false,
firebase: {
apiKey: "xxx-xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx.firebaseio.com",
projectId: "xxx",
storageBucket: "xxx.appspot.com",
messagingSenderId: "xxx"
}
};
調べにくく結構何時間もハマりました