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


Posted in Javascript onMay 20, 2017

在模板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"
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
浅谈Express异步进化史
Sep 09 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
ztree实现权限横向显示功能
May 20 #Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 #Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 #Javascript
微信小程序利用co处理异步流程的方法教程
May 20 #Javascript
关于jQuery库冲突的完美解决办法
May 20 #jQuery
layui文件上传实现代码
May 20 #Javascript
为你的微信小程序体积瘦身详解
May 20 #Javascript
You might like
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
Python多线程实现同步的四种方式
2017/05/02 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python自动抢红包教程详解
2019/06/11 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
C语言面试题
2013/05/19 面试题
《鞋匠的儿子》教学反思
2014/03/02 职场文书
促销活动计划书
2014/05/02 职场文书
学习方法演讲稿
2014/05/10 职场文书
信访工作经验交流材料
2014/05/23 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
调任通知
2015/04/21 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
导游词之凤凰古城
2019/10/22 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS