详解使用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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
简单实现js浮动框
Dec 13 Javascript
Vue自定义指令详解
Jul 28 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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中文乱码的解决方法
2006/12/17 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
shiro授权的实现原理
2017/09/21 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
python写的一个文本编辑器
2014/01/23 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
简单实现Python爬取网络图片
2018/04/01 Python
解决python报错MemoryError的问题
2018/06/26 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
如何使用python代码操作git代码
2020/02/29 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
《可爱的动物》教学反思
2014/02/22 职场文书
销售经理竞聘书
2014/03/31 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android