• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

angularjs 搞代码 4年前 (2021-12-31) 26次浏览 已收录 0个评论

这篇文章主要介绍了详解使用angular-cli发布i18n多国语言Angular应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在模板html标签中增加i18n

 <h1>Hello world!</h1>

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

 $ ng xi18n --output-path src/i18n

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

      Hello World!

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

      Hello World!Hello World!

      Hello World!哈喽,世界!
 $ 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/messag<i style="color:transparent">来源gaodai$ma#com搞$$代**码网</i>es.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" } 

以上就是详解使用angular-cli发布i18n多国语言Angular应用的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:详解使用angular-cli发布i18n多国语言Angular应用

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址