Using angular-cli to publish the Angular application of i18n language, angular-clii18n
Add i18n to the html tag of the template
<h1 i18n> Hello world! </ h1>
Use the ng command to generate a message.xlf file in xlf format
$ ng xi18n --output-path src / i18n
After the command is executed, the src / i18n / messages.xlf file is generated
<? 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>
Copy message.xlf, message.en.xlf (English version) message.zh.xlf Chinese version
<? 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> Hello, world! </ target>
</ trans-unit>
</ body>
</ file>
</ xliff>
$ ng serve --aot \
--i18n-file = src / i18n / messages.zh.xlf \
--locale = zh \
--i18n-format = xlf
Browse now, show Chinese version
$ 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
After the execution of this command, en and zh languages were generated. http: // localhost: 4200 / en access the English version, http: // localhost: 4200 / zh access the Chinese version. --bh specifies the default version. When http: // localhost: 4200 is accessed, jump to the default version.
Modify the package.json file and add the script
{
[...]
"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 "
}
[...]
}
In this way, you can execute the npm run build-i18n command to build multiple language versions at one time.
windows user command
> 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 script
"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"
}
The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the helper's home.