ionic4でのngx-translateを使った多言語対応

ionic4で多言語に対応するにはangularのngx-translateを使用するのが一般的です。ネット上の情報はionic3のものがほとんどで、ionic4で導入しようとするとなかなか上手く行かないと思います。

そこでionic4でのngx-translateの使い方を紹介します。

プラグインのインストール

これはionic3までと変わりません。下記のようにngx-translateとngx-translate/http-loaderをインストールしてください。

npm install @ngx-translate/core @ngx-translate/http-loader --save

app.module.ts

app.module.tsでは、TranslateModuleをインポートするだけになりました。

import { TranslateModule } from '@ngx-translate/core';


imports: [
  TranslateModule.forRoot()
],

ページごとのmodule.ts

次にapp/ページ名/ページ名.module.tsにあるページごとのmodule.tsを更新します。ここではHomeというページを翻訳します。

ここでは、createTranslateLoaderというfunctionを作って、翻訳ファイルの置き場所を指示します。

import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
      TranslateModule.forChild({
        loader: {
           provide: TranslateLoader,
           useFactory: (createTranslateLoader),
           deps: [HttpClient]
         }
    }),
  ],
  declarations: [HomePage]
})

page.ts

ページごとにTranslate Serviceを読み込み、言語を指定します。

import { TranslateService } from '@ngx-translate/core';


export class HomePage implements OnInit {
    constructor(
    public translate: TranslateService,
  ){
    this.translate.setDefaultLang('ja');
    this.translate.use('ja');
  }
}

page.html

ページに翻訳内容を埋め込みます。

<p>{{ 'HELLO' | translate }}</p>

翻訳ファイルの設置

翻訳のためのjsonファイルはsrc/assets/i18nフォルダに設置してください。今までのバージョンと間違えやすいので注意しましょう。

src/assets/i18n/ja.json

{
  "HELLO": "こんにちは"
}

まとめ

ポイントは、ページごとにTranslateLoaderを使ってファイルを読み込むことと、ファイルの置き場所をsrc/assetsの中にすることです。そこさえ注意すればトラブルなく多言語対応ができるはずです。