ionic3 + @ngx-translate で公式の多言語対応サンプルコードが動かないので対応してみた

先日からionic3でスマートフォンアプリを作成していますが、多言語対応をしようとしたところ、うまく動かなかったので対応してみました。

簡単なことなんですが、忘れちゃうとハマるので、備忘録として記録しておきます。

参考にした公式ドキュメントはこちら

Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

書いてあることの要約 2018/2/22時点

  1. TanslateModule, TranslateLoader, TranslateHttpLoader, HttpModule, Http をインポート
  2. @NgModule で asset/*.json を TranslateModule に読み込ませておく
  3. 各ページで TranslateService をインポートして {{ ‘HELLO’ | translate }} みたいに呼び出す
スポンサーリンク
AMP広告用336x280Adsense

うまく動かない内容

エラーは出ないんですが、 {{ ‘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

0
スポンサーリンク
AMP広告用336x280Adsense
AMP広告用336x280Adsense

フォローする