Angular 將翻譯合并到應(yīng)用中

將翻譯結(jié)果合并到應(yīng)用程序中

要將完成的翻譯結(jié)果合并到你的項(xiàng)目中，請完成以下操作

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

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

對于應(yīng)用程序的編譯期轉(zhuǎn)換，構(gòu)建過程會使用預(yù)先 (AOT) 編譯來生成小型、快速、可立即運(yùn)行的應(yīng)用程序。

要為每個(gè)語言環(huán)境構(gòu)建應(yīng)用程序的單獨(dú)可分發(fā)副本，請?jiān)陧?xiàng)目的 ?angular.json? 工作區(qū)構(gòu)建配置文件中在構(gòu)建配置中定義語言環(huán)境。

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

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

或者，僅對一種語言環(huán)境應(yīng)用特定構(gòu)建選項(xiàng) 以自定義語言環(huán)境配置。

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

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

以下子選項(xiàng)標(biāo)識源語言并告訴編譯器在哪里可以找到項(xiàng)目支持的翻譯。

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

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

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

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

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

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

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

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

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

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

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

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

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

從命令行構(gòu)建

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

ng build --localize

僅對一種語言環(huán)境應(yīng)用特定的構(gòu)建選項(xiàng)

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

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

為法語構(gòu)建的例子

以下示例顯示使用單個(gè)語言環(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

對于生產(chǎn)構(gòu)建，可使用配置組合來同時(shí)運(yùn)行這兩種配置。

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"
      }
    },
    // ...
  },
  // ...
}

報(bào)告缺失的翻譯

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

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

angular.json error 警告級別示例

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

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

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