Angularでi18n

(Angular v.4.3.6を利用)

Angular CLI環境でアプリケーションのi18n対応をしました。

準備

翻訳対象(HTMLのタグ)にi18n属性を設定

<h1 i18n="site header|An introduction header for this sample@@introductionHeader">Hello i18n!</h1>
  • i18n=<meaning>|<description>@@<id>
  • 値は必須ではない
  • メンテナンスを考慮した場合、IDは入力しておいた方がいい(未入力の場合、メッセージがかわるとIDも変わってしまうので)

XLIFF出力例

<trans-unit id="introductionHeader" datatype="html">
  <source>Hello i18n!</source>
  <context-group purpose="location">
    <context context-type="sourcefile">app/app.component.ts</context>
    <context context-type="linenumber">4</context>
  </context-group>
  <note priority="1" from="description">An introduction header for this sample</note>
  <note priority="1" from="meaning">site header</note>
</trans-unit>

要素を追加しない方法

<!--i18n: optional meaning|optional description -->
I don't output any element either
<!--/i18n-->

属性値を翻訳

<img [src]="logo" i18n-title title="Angular logo">

複数形、代替テキスト

(あとで確認する)

ファイル(XLIFF)の書き出し

Angular CLI利用している場合。

ng xi18n --output-path src/locale

XLIFFファイルについて

In the real world, you send the messages.es.xlf file to a Spanish translator who fills in the translations using one of the many XLIFF file editors.

https://angular.io/guide/i18n#translate-text-nodes

Serve

ng serve --aot --locale en --i18n-format xlf --i18n-file src/locale/messages.en.xlf

  • --i18n-file Localization file to use for i18n.
  • —i18n-format Format of the localization file specified with –i18n-file.
  • —locale Locale to use for i18n.

Note: this only works for AOT, if you want to use i18n in JIT you will have to update your bootstrap file yourself.

https://github.com/angular/angular-cli/wiki/stories-internationalization#serve

Build

ng build -prod --output-path dist/en --locale en --i18n-format xlf --i18n-file src/locale/messages.en.xlf

  • 基本はServeと同じ
  • --output-path dist/enを追加
    • 出力先を変更

Report missing translations

(あとで確認する)

参考