(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">
複数形、代替テキスト
- https://angular.io/guide/i18n#handle-singular-and-plural
- https://angular.io/guide/i18n#select-among-alternative-texts
(あとで確認する)
ファイル(XLIFF)の書き出し
Angular CLI利用している場合。
ng xi18n --output-path src/locale
XLIFFファイルについて
- XMLベースのファイル形式
- 今回は編集するためにCrowdinを利用
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.
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
- https://angular.io/guide/i18n#report-missing-translations
--missingTranslation=error
(あとで確認する)