將翻譯合併至應用程式

若要將完成的翻譯合併至你的專案，請完成下列動作

1. 使用 Angular CLI 建置一份專案可散發檔案的副本
2. 使用 "localize" 選項，將所有 i18n 訊息換成有效的翻譯，並建置一個在地化變體應用程式。 變體應用程式是應用程式可散發檔案的完整副本，針對單一地區設定翻譯。

合併翻譯後，請使用伺服器端語言偵測或不同的子目錄，提供應用程式的每一份可散發副本。

對於編譯期翻譯的應用程式，建置程序使用 AOT 編譯，產生精簡、快速、可直接執行的應用程式。

若要為每個地區設定建置一份獨立的可散發副本，請在專案的 angular.json 工作區建置設定檔中在建置設定中定義地區設定。

這種方法省去了為每個地區設定執行完整應用程式建置的需要，縮短了建置程序。

若要為每個地區設定產生應用程式變體，請使用 angular.json 工作區建置設定檔中的 "localize" 選項。 此外，若要從命令列建置，請搭配 --localize 選項使用 build Angular CLI 指令。

在建置設定中定義地區設定

使用專案 angular.json 工作區建置設定檔中的 i18n 專案選項，為專案定義地區設定。

下列子選項識別來源語言，並告訴編譯器去哪裡尋找專案支援的翻譯。

i18n 屬性與其型別的完整清單，請見 i18n 選項。

en-US 與 fr 的 angular.json 範例

例如，下列 angular.json 工作區建置設定檔的摘錄，將來源地區設定設為 en-US，並提供法文 (fr) 地區設定翻譯檔案的路徑。

"projects": {
    "angular.io-example": {
      // ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            // ...
          }
        }
      },
      "architect": {
        // ...
      }
    }
  }
}

為每個地區設定產生應用程式變體

若要在建置設定中使用你的地區設定定義，請使用 angular.json 工作區建置設定檔中的 "localize" 選項，告訴 CLI 要為建置設定產生哪些地區設定。

• 將 "localize" 設為 true，建置先前在建置設定中定義的所有地區設定。
• 將 "localize" 設為先前定義的地區設定識別碼子集陣列，只建置那些地區設定版本。
• 將 "localize" 設為 false，停用在地化，不產生任何地區設定專屬版本。

若你變更了這項設定，請將 "aot" 設為 true 以使用 AOT。

CLI 會載入並註冊地區設定資料，將每個產生的版本放在地區設定專屬目錄中，與其他地區設定版本分開，並將這些目錄放在專案設定好的 outputPath 內。 對每個應用程式變體，html 元素的 lang 屬性會設為該地區設定。 CLI 也會將地區設定加入設定好的 baseHref，調整應用程式每個版本的 HTML 基底 HREF。

將 "localize" 屬性設為共用設定，即可讓所有設定都繼承它。 也可以設定這個屬性來覆寫其他設定。

angular.json 納入所有地區設定的建置範例

下列範例顯示在 angular.json 工作區建置設定檔中將 "localize" 選項設為 true，如此建置設定中定義的所有地區設定都會被建置。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "localize": true,
    // ...
  },

從命令列建置

另外，搭配你現有的 production 設定，使用 ng build 指令的 --localize 選項。 CLI 會建置建置設定中定義的所有地區設定。 若你在建置設定中設定了地區設定，效果類似將 "localize" 選項設為 true。

ng build --localize

只為單一地區設定套用特定建置選項

若要只對單一地區設定套用特定建置選項，請指定單一地區設定，建立自訂的地區設定專屬設定。

法文建置範例

下列範例顯示使用單一地區設定的自訂地區設定專屬設定。

"build": {
    // ...
    "configurations": {
      // ...
      "fr": {
        "localize": ["fr"]
      }
    },
    // ...
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      // ...
      "fr": {
        "buildTarget": "angular.io-example:build:development,fr"
      }
    },
    // ...
  },
  // ...
}

將這個設定傳給 ng serve 或 ng build 指令。 下列程式碼範例顯示如何提供法文語言檔案。

ng serve --configuration=fr

生產環境建置請使用設定組合，同時執行兩個設定。

ng build --configuration=production,fr

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      // ...
    },
    "configurations": {
      // ...
      "fr": {
        "localize": ["fr"]
      }
    },
    // ...
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "buildTarget": "angular.io-example:build:production"
      },
      // ...
      "fr": {
        "buildTarget": "angular.io-example:build:development,fr"
      }
    },
    // ...
  },
  // ...
}

回報缺少的翻譯

當翻譯缺少時，建置仍會成功，但會產生類似 Missing translation for message "{translation_text}" 的警告。 若要設定 Angular 編譯器產生的警告等級，請指定下列其中一個等級。

請在 angular.json 工作區建置設定檔中 build 目標的 options 區段，指定警告等級。

angular.json 的 error 警告範例

下列範例顯示如何將警告等級設為 error。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // ...
    "i18nMissingTranslation": "error"
  },

翻譯 Angular 應用程式時，_翻譯轉換_會用翻譯集合中的字串，替換範本字面值字串的各個部分 (靜態字串與運算式) 並重新排序。 詳情請見 $localize。

下一步