ionicとは

IonicはAngularJsをベースにした、モバイルアプリケーションを開発するためのフレームワーク。オープンソースで、MITライセンスで利用できる。
Apache Cordovaの上に構築されており、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)

ionic start

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

ionic g page [name]

で作られたページはionicpage（モジュールが分割されている）

cannot read property 'querySelector' of null

対応しているhtmlページで、*ngIf ではなく、[hidden]に変えたら治りました。
参照

Property 'catch' does not exist on type 'PromiseLike'

firebaseDBに追加するときに発生しました。
原因は then pushが PromiseLikeを返す原因となるThenableReferenceを返すためみたいです。

解決策としては、pushの後に、setを追加すれば治りました。
this.firebaseDatabase.push().set({}).then(() => )
参考stackoverflow

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

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

ということなので、pathを変える必要があるが、どうやって変えるのか。
さらに色々調べてみると、Windowsの場合、システム詳細＞環境変数から設定できるみたい。
詳しくはこちらを：環境変数の設定方法

これをもとに、ANDROID_SDK_ROOTとpathを追加して、再度emulateしてみたら、動いた。
追加する内容は、こちら。

参考記事

How to Build An Ionic App with Firebase and AngularFire 4
Chat app with ionic3 and firebase & code at github
Using AngularFire with Ionic 3
Build Ionic 3, Angular 5 and Firebase Simple Chat App