Internationalization of Angular applications

Introduction

Article aspects in brief:

Source: https://giphy.com/gifs/originals-revteamoriginals2019-TGiS83WauSfil40ZbT

Overview of solutions

Source: https://giphy.com/gifs/mtUQxyq3Ez5OvJtcae

Main part

Source: https://giphy.com/gifs/website-SpopD7IQN2gK3qN4jS
$ npm install -g @angular/cli
$ ng new angular-sandbox
$ ng add @angular/localize
{
...
"projects": {
"angular-sandbox": {
...,
"i18n": {
"sourceLocale": "en-US",
"locales": {
"ru": "src/i18n/messages.ru.xlf"
}
},
"architect": {
"build": {
"options": {...},
"configurations": {
"production": {...},
"ru": {
"localize": ["ru"]
}
}
},
"serve": {
"options": {...},
"configurations": {
"production": {...},
"ru": {
"browserTarget": "angular-sandbox:build:ru"
}
}
},
...
}
}
},
...
}
$ ng xi18n --output-path src/i18n
$ ng serve --configuration=ru
$ ng build --prod --localize
$ ng xi18n --output-path src/i18n

Houston, we have a problem!

Source: https://giphy.com/gifs/hR6Q01jCXOr31wctJw
$ ng xi18n --output-path src/i18n
Source: https://image.slidesharecdn.com/random-141010110308-conversion-gate02/95/-12-638.jpg?cb=1412939240

In conclusion

Materials used in the article:

High-level software engineers for powerful web solutions https://intspirit.com/