Article directory
Target
Implement simple angular internationalization. This blog implements Chinese and French versions.
GeneralHello i18n!变为Chinese version: 你好 i18n!OrLegal version: Bonjour l'i18n !.
process
Create a project:
ng new i18nDemo
Open in the integrated terminal.
Add localization package:
ng add @angular/localize
Add formatting tags in html:
<h1 i18n>Hello i18n!</h1>
Now run it, the page is:
Generate translation template language pack:
ng extract-i18n --output-path src/locale
Generated a folder:locale, with a file in itmessages.xlf
Will translate the content in source into target:
We want to have two languages here, French and Chinese. therefore:
Why Chinese is zh-CN and French is fr-FR, see here:https://angular.cn/guide/i18n-common-locale-id
<!-- messages.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="zh-CN" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="4150330030790364157" datatype="html">
<source>Hello i18n!</source>
<target>中文版：你好 i18n!</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">1</context>
</context-group>
</trans-unit>
</body>
</file>
</xliff>
<!-- messages.fr.xlf -->
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="fr-FR" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="4150330030790364157" datatype="html">
<source>Hello i18n!</source>
<target>法语版:Bonjour l'i18n !</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">1</context>
</context-group>
</trans-unit>
</body>
</file>
</xliff>
Related documents:https://angular.cn/guide/i18n-common-translation-files
Next is configuration angular.json (according to the documentation).
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf"
},
"zh": {
"translation": "src/locale/messages.zh.xlf"
}
}
},
"localize": true,
The configuration is complete. Next build from the command line:
ng build --localize
Then configure:
"build"->"configurations"：
"fr": {
"localize": [
"fr"
]
},
"zh": {
"localize": [
"zh"
]
}
"serve"->"configurations"：
"fr": {
"browserTarget": "i18nDemo:build:development,fr"
},
"zh": {
"browserTarget": "i18nDemo:build:development,zh"
}
run
French version:
ng serve --configuration=fr
Chinese Version:
ng serve --configuration=zh
Same as the previous xml file.
ps: The following production buildng build --configuration=production,fr reported an error. I don’t know what to do. I will add more later.
Internationalization in TS
Reference:
angular6 Using message prompt box toast_angular4 message prompt box-CSDN blog
ngx-toastr - npm (npmjs.com)
https://angular.cn/guide/i18n-common-prepare
grammar:
In component code, translation source text and metadata are surrounded by backtick (`) characters. Mark strings for translation in your code using $localize tagged message strings.
$localize `string_to_translate`;
reference
Super detailed Angular internationalization solution - Nuggets (juejin.cn)
angular internationalization (i18n) - Jianshu (jianshu.com)
angular6 uses the message prompt box toast_angular4 message prompt box-CSDN Blog
Experience: For newbies, it feels too abstract and difficult to read the official documents alone, so I combined it with other blogs to understand. Then I found that some configurations of other blogs had been abandoned, and then I went to the official documentation. In this process, I filtered out a lot of information that I couldn’t understand (…) and summarized a lot of high-quality blogs that I could understand (!). I slowly learned it! Thanks to everyone who blogged and saved my life. .