如何使用angular-cli发布i18n多国语言Angular应用
小编给大家分享一下如何使用angular-cli发布i18n多国语言Angular应用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
在模板html标签中增加i18n
<h2 i18n>Hello world!</h2>使用ng命令产生xlf格式的message.xlf文件
$ ng xi18n --output-path class="lazy" data-src/i18n命令执行后，生成 class="lazy" data-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=class="lazy" data-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=class="lazy" data-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=class="lazy" data-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=class="lazy" data-src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh
> ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=class="lazy" data-src/i18n/messages.en.xlf --i18n-format=xlf --locale=enpackage.json脚本
"scripts": {
"build-i18n:es": "ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=class="lazy" data-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=class="lazy" data-src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
"build-i18n": "npm run build-i18n:en ; npm run build-i18n:zh"
}以上是“如何使用angular-cli发布i18n多国语言Angular应用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
