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

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

在模板万博manbetx平台标签中增加i18n

 Hello world!

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

 $ ng xi18n --output-path src/i18n

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

 xml version="1.0" encoding="UTF-8"      Hello World!

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

 xml version="1.0" encoding="UTF-8"      Hello World!Hello World!

 xml version="1.0" encoding="UTF-8"      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两种语言版本。https://localhost:4200/en访问英文版本，https://localhost:4200/zh访问中文版本。--bh指定默认版本，https://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" }

以上就是详解使用angular-cli发布i18n多国语言Angular应用的详细内容，更多请关注万博manbetx平台中文网其它相关文章！