使用Angular-CLI發佈一個i18n（國際化）應用(譯)

第一節：初識Angular-CLI
第二節：登陸組件的構建
第三節：創建一個待辦事項應用
第四節：進化！模塊化你的應用
第五節：多用戶版本的待辦事項應用
第六節：使用第三方樣式庫及模塊優化用
第七節：給組件帶來活力
Rx--隱藏在Angular 2.x中利劍
Redux你的Angular 2應用
第八節：查缺補漏大合集(上)
第九節：查缺補漏大合集(下)

使用Angular-CLI發佈一個i18n（國際化）應用

原文做者：Philippe Martin
譯者：王芃

原文地址：medium.com/@feloy/depl…

---

在這篇文章中我將會解釋如何使用angular-cli從頭建立一個國際化的Angular2應用以及如何把這個應用部署到Apache服務器。

文中涉及到的軟件依賴版本以下：

• angular-cli：1.0.0-beta.24
• angular: 2.4.1
• Apache 2.4

文中描述的樣例App已經放在github上了：github.com/feloy/angul…

新鮮出爐的i18n App

咱們首先使用angular-cli建立一個Angular App：

$ ng new angular-cli-i18n-sample複製代碼

在 app.component.html 中，咱們作一點小改動，加入一些用於i18n的文本：

<h1 i18n>Hello world!</h1>複製代碼

接下來，咱們須要建立一個 xlf 文件。但在建立以前，咱們須要對 src/tsconfig.json 作一些小改動：

{
  "compilerOptions": {
    [...]
  },
  "exclude": [ "test.ts" ],
  "angularCompilerOptions": { "genDir": "i18n" }
}複製代碼

在 package.json 中咱們也須要加入一個腳本定義，使用 ng-xi18n 這個工具來生成一個可翻譯的文本文件：

{
  [...]
  "scripts": {
    [...]
    "extract-i18n": "cd src && ng-xi18n"
  }
  [...]
}複製代碼

如今，咱們可使用下面的命令來生成 src/i18n/messages.xlf 了：

$ npm run extract-i18n複製代碼

咱們如今要建立不一樣的語言翻譯文件了，首先是英文翻譯，拷貝 src/i18n/messages.xlf 成 src/i18n/messages.en.xlf：

[...]
      <trans-unit id="[...]" datatype="html">
        <source>Hello World!</source>
        <target>Hello World!</target>
      </trans-unit>
[...]複製代碼

一樣建立法語的 src/i18n/messages.fr.xlf :

[...]
      <trans-unit id="[...]" datatype="html">
        <source>Hello World!</source>
        <target>Salut la foule !</target>
      </trans-unit>
[...]複製代碼

再來建立一個西班牙版本 src/i18n/messages.es.xlf ：

[...]
      <trans-unit id="[...]" datatype="html">
        <source>Hello World!</source>
        <target>¿hola, qué tal?</target>
      </trans-unit>
[...]複製代碼

如今咱們可使用 angular-cli 在啓動應用時使用你的語言偏好，以西班牙語爲例：

$ ng serve --aot \
           --i18n-file=src/i18n/messages.es.xlf \
           --locale=es \
           --i18n-format=xlf複製代碼

如今你能夠打開瀏覽器訪問 http://localhost:4200 ，而後就應該能夠看到西班牙語版本的應用了。

發佈到生產環境的準備工做

在生產環境，咱們但願依照不一樣語言，以不一樣的子目錄的形式呈現不一樣語言版本的app。例如西班牙語版本能夠經過 http://myapp.com/es/ 來訪問；而法語版本經過 http://myapp.com/fr/ 來訪問。固然咱們還但願根URL http://myapp.com/ 能夠重定向到咱們選擇的語言選項。

要這麼作的話，我猜咱們須要根據不一樣的語言來改變 base href，好比改爲 es, en 和 fr。幸運的是，angular-cli 有一個特殊的命令行開關：--bh，這個開關容許咱們在編譯時聲明 base href。

下面給出一個命令行腳本（譯者注：*nix版本可用，windows版本須要改寫一下），這個腳本能夠幫咱們爲不一樣語言建立不一樣的bundle

$ for lang in es en fr; do \
    ng build -o dist/$lang \
             --aot \
             -prod \
             --bh /$lang/ \
             --i18n-file=src/i18n/messages.$lang.xlf \
             --i18n-format=xlf \
             --locale=$lang; \
  done複製代碼

固然咱們能夠在 package.json 中給出這個命令的腳本定義，這樣咱們就可使用npm腳原本執行了：npm run build-i18n

{
  [...]
  "scripts": {
    [...]
    "build-i18n": "for lang in en es fr; do ng build -o dist/$lang --aot -prod --bh /$lang/ --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done"
  }
  [...]
}複製代碼

如今，咱們在dist目錄下有了3個子目錄： es/ ， fr/ 和 en/ ，裏面有對應不一樣語言的bundle。

Apache配置

下面是一個虛擬主機配置，這個配置在 /var/www 目錄來啓動咱們的不一樣版本的bundle文件，因此咱們得把剛剛生成的3個目錄 es/ ， fr/ 和 en/拷貝到這裏。

有這樣一個配置後，訪問 http://www.myapp.com 會根據瀏覽器優選的語言首選項來重定向到不一樣的子目錄（若是沒有匹配的語言時 en做爲fallback）。固然你能夠經過改動url來訪問其餘語言版本。

<VirtualHost *:80>
  ServerName www.myapp.com
  DocumentRoot /var/www
  <Directory "/var/www">
    RewriteEngine on
    RewriteBase /
    RewriteRule ^../index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (..) $1/index.html [L]
    RewriteCond %{HTTP:Accept-Language} ^fr [NC]
    RewriteRule ^$ /fr/ [R]
    RewriteCond %{HTTP:Accept-Language} ^es [NC]
    RewriteRule ^$ /es/ [R]
    RewriteCond %{HTTP:Accept-Language} !^es [NC]
    RewriteCond %{HTTP:Accept-Language} !^fr [NC]
    RewriteRule ^$ /en/ [R]
  </Directory>
</VirtualHost>複製代碼

加餐：爲不一樣語言增長連接

若是在應用中有不一樣語言的選項連接，用戶能夠點擊這些連接來訪問不一樣語言版本，那就太好了（譯者注：汗，這不是標配需求嗎？）。

在Angular2中，須要知道一個小技巧：當前語言是能夠經過 LOCALE_ID 取得的。

下面咱們演示一下如何取得 LOCALE_ID、顯示不一樣語言的列表：

// app.component.ts
import { Component, LOCALE_ID, Inject } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  languages = [
    { code: 'en', label: 'English'},
    { code: 'es', label: 'Español'},
    { code: 'fr', label: 'Français'}
  ];
  constructor(@Inject(LOCALE_ID) protected localeId) {}
}
<!-- app.component.html -->
<h1 i18n>Hello World!</h1>
<template ngFor let-lang [ngForOf]="languages">
  <span *ngIf="lang.code !== localeId">
    <a href="/{{lang.code}}/">{{lang.label}}</a> </span>
  <span *ngIf="lang.code === localeId">{{lang.label}} </span>
</template>複製代碼