---
title: Angular i18n vs ngx-translate
tags: Angular, Internationalization
---

|項目|i18n|ngx|
|:-:|:-:|:-:|
|author|Angular 官方|ocombe|
|status|updating|maintenance|
|翻譯文本格式|XLF, JSON etc...|JSON|
|使用方式|於標籤標示使用模式後使用指令萃取翻譯文本|以變數形式使用 ( 類 l10n )|
|翻譯方式|事先建立好各語系的靜態檔案|以 Http Client 即時取得翻譯文本|
|優點|使用速度快，使用時不佔硬體資源、可註解供翻譯人員辨識|build 速度快，切換便利|
|缺點|build 速度慢、對應不便且彈性差、設定繁瑣|使用時需事先讀取文本、佔資源|

### i18n

* 翻譯原始文本 ( 預設為 en-US ) 萃取指令 - `ng extract i18n`
* 可選參數
1. -output-path： 更改 soruce language file 位置
2. —format：更改 soruce language file 格式
3. —outFile：更改 soruce language file 名稱
* 文本格式
1. --format=xlf
2. --format=xlf2
3. --format=xmb
4. --format=json
5. --format=arb
* 目前使用體驗較建議使用 xlf > json，xlf 比較能精準對應翻譯之欄位，但格式相較 json 而言不友善。

* 因使用 locale 定義環境語系，不支援，說明文件亦不建議即時切換，但可以透過 Angular build 時指定特定語系使用的 baseURL 搭配 NginX 設定達到類似切換語系的功用，實質上是讀取兩份不同之 html。
* 可透過 angular.json

         "architect": {
                "build": {
                    ...
                  },
                  "configurations": {
                    "zh-Hant": {
                      "localize": ["zh-Hant"],
                      "baseHref": "/zh-Hant" <-- 指定該語系搭配的 base URL
                    },
                    "en-US": {
                      "localize": ["en-US"],
                      "baseHref": "/en-US"
                    },
                    "production": {
                      "localize": true, <-- 這裡可以設定要 build 的語系，
                                            若為 true 則所有設定之語系都會 build。

或透過 CLI 指定 baseURL。
`ng build --prod --base-href /zh-Hant/ --output-path dist/zh-Hant`

* build 時會報錯 `Localized bundle generation failed. Cannot read properties of undefined (reading 'includes')`，暫時可透過修改 `tsconfig` 內的 target 設定值 es2015 為 ES5 解決。

#### Issues
* Nebular 的字型無法正常 decode，導致 ng2-smartTable ICON 異常。

### Reference
* [《[Angular] Day29. Internationalization (i18n)》- Fandix](https://ithelp.ithome.com.tw/articles/10263276)