將翻譯結果合并到應用程序中

要將完成的翻譯結果合并到你的項目中，請完成以下操作

1. 使用 Angular CLI 構建項目的可分發(fā)文件的副本
2. 使用 ?"localize"? 選項將所有 i18n 消息替換為有效的翻譯并構建本地化的應用程序變體。應用程序變體就是為單個語言環(huán)境翻譯的應用程序的可分發(fā)文件的完整副本。

合并翻譯后，可使用服務器端語言檢測或不同的子目錄來提供（serve）應用程序的每個可分發(fā)副本。

對于應用程序的編譯期轉換，構建過程會使用預先 (AOT) 編譯來生成小型、快速、可立即運行的應用程序。

要為每個語言環(huán)境構建應用程序的單獨可分發(fā)副本，請在項目的 ?angular.json? 工作區(qū)構建配置文件中在構建配置中定義語言環(huán)境。

此方法不需要為每個語言環(huán)境執(zhí)行完整的應用程序構建，從而縮短了構建過程。

要為每個語言環(huán)境生成應用程序變體，請使用 ?angular.json? 工作區(qū)構建配置文件中的 ?"localize"? 選項。此外，要從命令行構建，請使用帶有 ?--localize? 選項的 ?build ?Angular CLI 命令。

或者，僅對一種語言環(huán)境應用特定構建選項 以自定義語言環(huán)境配置。

在構建配置中定義語言環(huán)境

使用項目的工作區(qū)構建配置文件 ?angular.json? 中的 ?i18n ?項目選項來定義項目的語言環(huán)境。

以下子選項標識源語言并告訴編譯器在哪里可以找到項目支持的翻譯。

angular.json 用于 en-US 和 fr 示例

比如，工作區(qū)構建配置文件 ?angular.json? 的以下代碼片段會將源語言環(huán)境設置為 ?en-US? 并提供法語 ( ?fr? ) 語言環(huán)境翻譯文件的路徑。

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

為每個語言環(huán)境生成應用程序變體

要在構建配置中使用你的語言環(huán)境定義，請使用工作空間構建配置文件 ?angular.json? 中的 ?"localize"? 選項來告訴 CLI 要為此構建配置生成哪些語言環(huán)境。

• 對于先前在構建配置中定義的所有語言環(huán)境，將 ?"localize"? 設置為 ?true?。
• 將 ?"localize"? 設置為先前定義的語言環(huán)境標識符子集的數(shù)組，以單獨構建那些語言環(huán)境版本。
• 將 ?"localize"? 設置為 ?false ?以禁用本地化并且不生成任何特定于語言環(huán)境的版本。

注意：
本地化組件模板需要預先 (AOT) 編譯。
如果你更改了此設置，請將 ?"aot"? 設置為 ?true ?以使用 AOT。

由于 i18n 的部署復雜性和最小化重建時間的需要，開發(fā)服務器一次僅支持本地化單個語言環(huán)境。如果你將 ?"localize"? 選項設置為 ?true?，定義了多個語言環(huán)境，并使用 ?ng serve?，就會發(fā)生錯誤。如果要針對特定語言環(huán)境進行開發(fā)，請將 ?"localize"? 選項設置為特定的語言環(huán)境。比如，對于法語 ( ?fr ?)，請指定 ?"localize": ["fr"]?。

CLI 加載并注冊語言環(huán)境數(shù)據，將每個生成的版本放置在特定語言環(huán)境的目錄中以使其與其他語言環(huán)境版本分開，并將其目錄放在為此項目配置的 ?outputPath ?中。對于每個應用程序變體，將 ?html ?元素的 ?lang ?屬性設置為其語言環(huán)境。CLI 還通過將語言環(huán)境添加到所配置的 ?baseHref ?中來調整每個應用程序版本的 HTML baseHref。

將 ?"localize"? 屬性設置為共享配置以有效繼承所有配置。此外，會將該屬性設置為覆蓋其他配置。

angular.json 包含構建示例中的所有語言環(huán)境

以下示例展示了如何把工作區(qū)構建配置文件 ?angular.json? 中的 ?"localize"? 選項設置為 ?true?，以構建構建配置中定義的所有語言環(huán)境。

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

從命令行構建

此外，可以將 ?--localize? 選項與 ?ng build? 命令和你現(xiàn)有的 ?production ?配置結合使用。CLI 會構建配置中定義的所有語言環(huán)境。如果在構建配置中設置了語言環(huán)境，則相當于將 ?"localize"? 選項設置為 ?true?。

ng build --localize

僅對一種語言環(huán)境應用特定的構建選項

要將特定構建選項僅應用于一個語言環(huán)境，請指定單個語言環(huán)境以創(chuàng)建自定義的語言環(huán)境專有配置。

請使用只有一個語言環(huán)境的 Angular CLI 開發(fā)服務器 ( ?ng serve? )。

為法語構建的例子

以下示例顯示使用單個語言環(huán)境的自定義語言環(huán)境專屬配置。

"build": {
    // ...
    "configurations": {
      // ...
      "fr": {
        "localize": ["fr"]
      }
    },
    // ...
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      // ...
      "fr": {
        "browserTarget": "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": {
        "browserTarget": "angular.io-example:build:production"
      },
      // ...
      "fr": {
        "browserTarget": "angular.io-example:build:development,fr"
      }
    },
    // ...
  },
  // ...
}

報告缺失的翻譯

當缺少翻譯時，可以構建成功但會生成警告，比如 ?Missing translation for message "{translation_text}"?。要配置 Angular 編譯器生成的警告級別，請指定以下級別之一。

在工作區(qū)構建配置文件 ?angular.json? 中 ?build ?目標的 ?options ?部分指定警告級別。

angular.json error 警告級別示例

以下示例顯示如何將警告級別設置為 ?error?。

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

當你將 Angular 項目編譯為 Angular 應用程序時，?i18n? 屬性的實例將被替換為 ?$localize? 標記的消息字符串的實例。這意味著你的 Angular 應用程序會在編譯后被翻譯。這也意味著你可以創(chuàng)建 Angular 應用程序的本地化版本，而無需為每個語言環(huán)境重新編譯整個 Angular 項目。
當你翻譯 Angular 應用程序時，翻譯轉換會用翻譯集合中的字符串替換和重新排序模板文字字符串的部分（靜態(tài)字符串和表達式）。