---
# System prepended metadata

title: Angular i18n vs ngx-translate
tags: [Angular, ' Internationalization']

---

---
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。
    ```
     "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。
    ```

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

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