详解使用angular-cli发布i18n多国语言Angular应用
时间:2019-03-30
本文章向大家介绍详解使用angular-cli发布i18n多国语言Angular应用,主要包括详解使用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" }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- HttpServletRequest.getParameter()出现乱码现象解决方案
- 海量数据迁移之外部表加载(100天)
- Vue.js实现一个SPA登录页面的过程
- vue实现侧边栏手风琴效果
- 关于vue的使用计算属性VS使用计算方法的问题
- 如何在vue中使用sass
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- jquery实现上下滑动选择
- echarts图表里label文字过长换行的方法
- 获取Object对象的length
- Vue引发的getter和setter
- 基于Vue.js的大型报告页项目实现过程及问题总结(一)
- 使用vue-axios请求geoJson数据报错的问题
- 在vue-cli项目中使用echarts
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java自动化测试(HashSet和HashMap 7)
- 构建模型的3种方法
- 训练模型的3种方法
- 干货 | 携程APP/Web功能和视觉测试平台-Watcher
- FPGA中的亚稳态
- 蜂鸟E203系列——定时器中断设计
- FPGA信号截位策略
- 数字IC设计经典笔试题之【verilog篇】
- 蜂鸟E203系列——Windows下运行hello world例程
- 蜂鸟E203系列——Windows开发工具
- FPGA奇数分频
- 形式化分析工具:在虚拟操作系统和主机操作系统之间配置共享文件夹
- 「PHP」以nginx、php-cgi为例,把nginx、php-cgi安装为Windows系统服务
- 气象编程 | Bash拍了拍你说:掌握了我,工作效率起码提高5倍
- 优雅的使用Go进行单元测试