使用angular-cli发布i18n多国语言Angular应用

在模板html标签中增加i18n
<h1 i18n>Hello world!</h1>

使用ng命令产生xlf格式的message.xlf文件

$ ng xi18n --output-path src/i18n

命令执行后，生成src/i18n/messages.xlf 文件

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
        <source>Hello World!</source>
        <target/>
      </trans-unit>
    </body>
  </file>
</xliff>

复制message.xlf,message.en.xlf(英文版本) message.zh.xlf中文版本

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
        <source>Hello World!</source>
        <target>Hello World!</target>
      </trans-unit>
    </body>
  </file>
</xliff>

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
        <source>Hello World!</source>
        <target>哈喽，世界！</target>
      </trans-unit>
    </body>
  </file>
</xliff>

$ ng serve --aot \
           --i18n-file=src/i18n/messages.zh.xlf \
           --locale=zh \
           --i18n-format=xlf

现在浏览，显示的是中文版本

$ for lang in en zh; do \
    ng build --output-path=dist/$lang \
             --aot \
             -prod \
             --bh /$lang/ \
             --i18n-file=src/i18n/messages.$lang.xlf \
             --i18n-format=xlf \
             --locale=$lang; \
  done

这个命令执行完毕后，生成了en和zh两种语言版本。http://localhost:4200/en访问英文版本，http://localhost:4200/zh访问中文版本。--bh指定默认版本，http://localhost:4200访问时，跳转到默认版本。

修改package.json文件，加入脚本

{
  [...]
  "scripts": {
    [...]
    "build-i18n": "for lang in en zh; do ng build --output-path=dist/$lang --aot -prod --bh /$lang/ --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done"
  }
  [...]
}

这样就可以执行npm run build-i18n 命令，一次build多个语言版本了。

windows用户命令

> ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh
> ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en

package.json脚本

"scripts": {
    "build-i18n:es": "ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh","build-i18n:en": "ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en","build-i18n": "npm run build-i18n:en  ; npm run build-i18n:zh"
  }

参考资料：https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358

使用angular-cli发布i18n多国语言Angular应用

猜你在找的Angularjs相关文章