Thinking more...: Angular i18n

Angular 官方提供的套件以及教學：Angular Internalization (i18n)

文章裡一大堆，簡單整理如下：

安裝：ng add @angular/localize
- 這個步驟會幫你在 polyfills.ts 裡加入必要的 import
使用，這部份分為 HTML 跟程式
- HTML，在需要多國語言的標籤加入 i18n 的屬性
  - <span i18n>Hello world</span>
  - <span i18n=“@@span_hello”>Hello world</span> ，用 i18n=“@@span_hello” 的好處是，產出的翻譯檔裡不會是一個隨意的數字，而是一個對開發者來說比較明確的名稱。
  - <input i18n-placeholder> 這個是有些屬性本身需要多國語言的，就在前面加上 “i18n-“
- 程式，字串前方加上 $localize ，並且改用 back quote，例如：$localize`hello world`
萃取，用 ng xi18n –output-path src/i18n 就可以把 HTML 裡有標 i18n 的字串萃取到 src/i18n/messages.xlf 裡
翻譯，先把上個步驟取得的 messages.xlf 複製為 messages.zh_Hant.xlf ，再去編輯。這邊提供一個簡易的網頁工具 – tiny-translator，在處理上會方便很多。開啟以後，要先建立專案，然後上傳 .xlf 檔案，接著就可以進行翻譯了。翻譯好，再下載下來即可。
合併，程式開發中難免會有增刪，每次用 xi18n 基本上都是重新萃取一次，等於是又要再搞一次合併的功夫，這太累。tiny-translator 的作者有提供另外一個工具 – xliffmerge
- 安裝：npm install -g ngx-i18nsupport
- 在 package.json 的 scripts 裡加入 “extract-i18n”: “ng xi18n –output-path src/i18n && xliffmerge –profile xliffmerge.json en de” ，裡面的 en, de 等 locale 請依照自己的需求作調整
- 新增 xliffmerge.json ，這個檔案請參考後面。
- 使用 npm run extract-i18n 就可以自動萃取字串並且作合併了。
專案的建置，主要是修改 angular.json，有三個部分：
- projects / your_project_name 加入 “i18n”: {“sourceLocale”: “en”, “locales”: {“de”: “src/i18n/messages.de.xlf”}}
- projects / your_project_name / architect / build / configurations 裡加入 “de”: {“localize”: [“de”]}
- projects / your_project_name / architect / serve / configurations 裡加入 “de”: {“browserTarget”: “ng-hosting:build:de”}
要執行 ng build / ng serve 時，就可以用
- ng build –configuration=production,de
- ng serve –configuration=de
補充一個我覺得很重要的部分，就是一個語言要建置一次，所以一般的佈署會是這樣的，建置好 zh ，放在 zh/ 目錄下，建置好 de，放在 de/ 目錄下，然後在 nginx/apache 的設定裡去依照 header 的 language 去導向到對應的目錄去。這篇 Deploying an i18n Angular app with angular-cli 的後面有教怎麼去設定 apache / nginx。

看到這邊，你可能會想，那程式裡標上 $localize 的字串呢？嗯，ng xi18n 並不會把這些字串萃取出來 (issue)，所以這部份得自己手動處理 😣

P.S. 用 ngx-i18nsupport 的 tooling 可以把上面講的簡化掉，像是加入 npm package、在 package.json 加入 extract-i18n 、在 angular.json 加入設定等等，一次就搞定了，我是已經用了才看到這個 tooling ，有點相見恨晚。

// xliffmerge.json
{
  "xliffmergeOptions": {
    "srcDir": "src/i18n",
    "genDir": "src/i18n",
    "i18nFile": "messages.xlf",
    "i18nBaseFile": "messages",
    "i18nFormat": "xlf",
    "encoding": "UTF-8",
    "defaultLanguage": "en",
    "languages": ["en", "de"],
    "removeUnusedIds": true,
    "supportNgxTranslate": false,
    "ngxTranslateExtractionPattern": "@@|ngx-translate",
    "useSourceAsTarget": true,
    "targetPraefix": "",
    "targetSuffix": "",
    "beautifyOutput": false,
    "preserveOrder": true,
    "allowIdChange": false,
    "autotranslate": false,
    "apikey": "",
    "apikeyfile": "",
    "verbose": false,
    "quiet": false
  }
}

Thinking more...

星期二, 5月 05, 2020

Angular i18n

沒有留言: