【ionic】アプリ開発でエラーしたとこまとめ(随時追加)

#ionicとは
Ionicは[AngularJs](https://angularjs.org/)をベースにした、モバイルアプリケーションを開発するためのフレームワーク。オープンソースで、MITライセンスで利用できる。
[Apache Cordova](https://cordova.apache.org/)の上に構築されており、[HTML5](https://ja.wikipedia.org/wiki/HTML5)を用いたクロスプラットフォームのハイブリットアプリケーションを開発できる。
##Tinderのようなアプリの開発
今回は、Tinderライクなアプリケーションをプロトタイプとして、開発しようと思います。
※ionicの始め方は他のところにも書いてあるので、割愛

機能としては、
- スワイプ
- チャット
- マッチ
- メッセージ
※もし開発できたら、実装方法を記事でまとめようと思います。

##ミスりやすいところ
同じところでミスした人の救いになれば。
###「cordova」を使うとき
```
ionic serve
```
ではcordovaは発動しない。
Facebookログイン実装したときにつまづいたので記載。

```
ionic cordova run browser
```
※「ios」または「android」をプラットホームとしている場合はbrowserのところを変更

###「Error: StaticInjectorError[HttpClient]・・・」とかっていうerror


```app.module.ts
import {HttpClientModule} from '@angular/common/http'
```
を追加し、

```app.module.ts
@NgModule({
  declarations: [
  ],
  imports: [
    HttpModule,
    HttpClientModule, ←追加
    IonicModule.forRoot(MyApp)
  ],
```
で解決できた。

###やっかいな"@ionicpage"
>IonicにはLazyLoadingに対応したIonicPageという考え方があります。
>※LazyLoadingは、アプリ起動時間の短縮を目的に、モジュールの分割を行い、必要時にダウンロードを行わせる考え方です

参考：[IonicPage採用時のHTMLタグ拡張(Custom Components)実装について (1/2)](https://qiita.com/felicidadept/items/3f1d4e0aa4719cdc9f2f#ionicpage)

```
ionic start
```
で作られたページは通常（個別のモジュールがない）

```
ionic g page [name]
```
で作られたページはionicpage（モジュールが分割されている）

###cannot read property 'querySelector' of null
対応しているhtmlページで、```*ngIf``` ではなく、```[hidden]```に変えたら治りました。
[参照](https://github.com/ionic-team/ionic/issues/11227)

###Property 'catch' does not exist on type 'PromiseLike'
firebaseDBに追加するときに発生しました。
原因は``` then push```が ```PromiseLike```を返す原因となるThenableReferenceを返すためみたいです。

解決策としては、```push```の後に、```set```を追加すれば治りました。
```this.firebaseDatabase.push().set({}).then(() => )```
[参考stackoverflow](https://stackoverflow.com/questions/47659996/property-catch-does-not-exist-on-type-promiselikevoid)

###Execution failed for task ':app:processDebugResources'
```ionic cordova run android```で動かそうと思ったら、なにやらエラーが発生。上の方にさかのぼってみてみると、

```
resource string/fb_app_name (aka io.ionic.starter/fb_app_name) not found.
```
FacebookのIDとNAMEが読み込まれてないらしい。

ひとまず、ぐぐってみると同じような人がいた。
以下の行を追加すれば、なおりました。

```platforms/app/src/main/res/values/strings.xml
<string name="fb_app_id">ID</string>
<string name="fb_app_name">APP_NAME</string>
```

[参考ionic forum](https://forum.ionicframework.com/t/failed-build-for-android-execution-failed-for-task-app-processdebugresources/124551)

###PANIC: Missing emulator engine program for 'x86' CPU.
```ionic cordova emulate android```にてエミュレーターで確認しようとしたらエラー。
ひとまずぐぐってみると、環境変数のpathが違うやらなんやら。
>Also, when I run:
$ ${ANDROID_SDK_ROOT}/tools/emulator -avd my-custom-avd
I got: PANIC: Missing emulator engine program for 'x86' CPU.
But, when I run:
$ ${ANDROID_SDK_ROOT}/emulator/emulator -avd my-custom-avd
**the emulator starts and works fine**
>

参照：[ionic cordova run android results in PANIC: Missing emulator engine program for 'x86' CPU](https://stackoverflow.com/questions/49601521/ionic-cordova-run-android-results-in-panic-missing-emulator-engine-program-for)

ということなので、pathを変える必要があるが、どうやって変えるのか。
さらに色々調べてみると、Windowsの場合、システム詳細＞環境変数から設定できるみたい。
詳しくはこちらを：[環境変数の設定方法](http://www.wannko.net/windows10/etc/kankyo.html)

これをもとに、ANDROID_SDK_ROOTとpathを追加して、再度emulateしてみたら、動いた。
追加する内容は、[こちら](https://ionicframework.com/docs/developer-resources/platform-setup/windows-setup.html)。

##参考記事
[How to Build An Ionic App with Firebase and AngularFire 4](https://devdactic.com/ionic-firebase-angularfire/)
[Chat app with ionic3 and firebase](http://tphangout.com/) & [code at github](https://github.com/rajayogan/ionic3chat)
[Using AngularFire with Ionic 3](https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md)
[Build Ionic 3, Angular 5 and Firebase Simple Chat App](https://www.djamware.com/post/5a629d9880aca7059c142976/build-ionic-3-angular-5-and-firebase-simple-chat-app)