使用Angular-CLI发布一个i18n（国际化）应用(译)

使用Angular-CLI发布一个i18n（国际化）应用

原文作者：Philippe Martin
译者：王芃

原文地址：https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.gkkec7fkt

---

在这篇文章中我将会解释如何使用angular-cli从头创建一个国际化的Angular2应用以及如何把这个应用部署到Apache服务器。

文中涉及到的软件依赖版本如下：

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

文中描述的样例App已经放在github上了：https://github.com/feloy/angular-cli-i18n-sample

新鲜出炉的i18n App

我们首先使用angular-cli创建一个Angular App：

$ ng new angular-cli-i18n-sample

在 app.component.html 中，我们做一点小改动，加入一些用于i18n的文本：

Hello world!

接下来，我们需要创建一个 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：

[...]
      
        Hello World!
        Hello World!
      
[...]

同样创建法语的 src/i18n/messages.fr.xlf :

[...]
      
        Hello World!
        Salut la foule !
      
[...]

再来创建一个西班牙版本 src/i18n/messages.es.xlf ：

[...]
      
        Hello World!
        ¿hola, qué tal?
      
[...]

现在我们可以使用 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来访问其他语言版本。

  ServerName www.myapp.com
  DocumentRoot /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]
  

加餐：为不同语言增加链接

如果在应用中有不同语言的选项链接，用户可以点击这些链接来访问不同语言版本，那就太好了（译者注：汗，这不是标配需求吗？）。

在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) {}
}

Hello World!