先日からionic3でスマートフォンアプリを作成していますが、多言語対応をしようとしたところ、うまく動かなかったので対応してみました。
簡単なことなんですが、忘れちゃうとハマるので、備忘録として記録しておきます。
参考にした公式ドキュメントはこちら
https://ionicframework.com/docs/developer-resources/ng2-translate/
書いてあることの要約 2018/2/22時点
- TanslateModule, TranslateLoader, TranslateHttpLoader, HttpModule, Http をインポート
- ＠NgModule で asset/*.json を TranslateModule に読み込ませておく
- 各ページで TranslateService をインポートして {{ ‘HELLO’ | translate }} みたいに呼び出す
うまく動かない内容
エラーは出ないんですが、 {{ ‘HELLO’ | translate }} で書いたところが、そのまま 「HELLO」 と出てしまう。本当なら、jsonファイルに指定した 「Hello @en」 や 「こんにちは @ja」 に変換されるはずなのに、動いていない。
対処方法
公式ドキュメントの Http をすべて HttpClient に変更したら動きました。
公式ドキュメント
import { HttpModule, Http } from '@angular/http';
変更後
import { HttpClient, HttpClientModule } from '@angular/common/http';
その後はコードで「Http」になっているところを「HttpClient」に一括変換して完了です。
理屈はよくわかっていないんですが、プロジェクトを作成するときに選べる「super」のテンプレートで多言語の対応をしている部分を見比べて対応しました。
HttpClientModule が追加されたのが最近だから・・・っていうほど最近でもないし、なんでだろう〜。ionic も angular も初めて触るので、わからないことだらけ。
動作環境：
ionic：3.19.1
ionic-angular:3.9.2
@angular/*:5.0.3
@ngx-translate/core:^9.1.1
@ngx-translate/http-loader:^2.0.1