ngx-translate で Angular の多言語対応

Angular の多言語対応を ngx-translate で行ったのですが、シンプルな対応方法の日本語情報がなかなか見つからなかったので、こちらにメモを残しておきます。

はじめに

この記事では、以下の内容に対応します。

• 日本語と英語に対応する
• それ以外の言語の場合は英語を表示する
• ブラウザの言語設定に合わせる

動作環境のバージョンは、投稿時点から考えると少し古いですが以下の通りです。

• Angular 11.2.14
• ngx-translate 6.0.0

インストール

ngx-translate をインストールします。
Angular のバージョンによって、それぞれ対応するバージョンが異なりますので、 リリース のページを確認して、必要に応じてバージョンを指定しましょう。

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

モジュールのインポート

app.module.ts の import に以下の内容を追加します。

src/app/app.module.ts

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

app.module.ts の import の後に以下の内容を追記します。

src/app/app.module.ts

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

app.module.ts の @NgModule の imports に以下の内容を追加します。

src/app/app.module.ts

  imports: [
    // BrowserModuleなど...
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
    })
  ],

初期化

AppComponent で ngx-translate を初期化します。
app.component.ts に import を追加して、 AppComponent のコンストラクタを以下のようにします。

src/app/app.component.ts

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

src/app/app.component.ts

  constructor(translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use(window.navigator.language);
  }

辞書ファイルの配置

辞書ファイルは src/assets/i18n に配置します。ファイル名は {lang}.json の形式です。ここでは en.json と ja.json を置きます。

en.json

{
  "hello": "Hello"
}

ja.json

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

翻訳の適用

翻訳を適用するには、コンポーネントの HTML の中で以下のように書きます。

<p translate>hello</p>

以下のようにバインディングの中でパイプで渡すこともできます。

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

これで最低限の多言語対応ができるようになったと思います。

参考