I’m working on a white-label app that multiple brands use. Each brand is distributed to numerous countries/languages. Currently, we’re using ngx-translate
module for translations. We serve necessary translations as JSON files in the format $BRAND/$LANGUAGE/$LOCATION.json
, for example, acme/en/US.json
or vertex/es/PR.json
.
We’re considering moving our app to the @angular/localize
module. @angular/localize
works quite well with language-LOCATION
pair, but I can’t find a way to incorporate the brand variable to support different localisations for different brands.
Previously it was possible to pass --i18n-file
param to ng build
command which enabled storing $BRAND-$LANGUAGE-$LOCATION
files in the file system and passing them one-by-one. Which might’ve increased the total build time, though.
The current Angular setup only lets to specify one translation file per locale. For example:
{
"projects": {
"white-label-app": {
"projectType": "application",
"i18n": {
"sourceLocale": "en-US",
"locales": {
"es-PR": "src/locale/messages.es-PR.xlf",
"es-ES": "src/locale/messages.es-ES.xlf"
}
}
}
}
}
Given that, there are three solutions I see for now:
- Programmatically update
angular.json
to specify a list of locales per brand before each build - Replace
src/locale
files with brand-specific translations - Suffix locales and translation files in
angular.json
with brand code i.e.en-USacme
All the solutions above have obvious disadvantages.
Has any of you faced a similar situation or, perhaps, knows how it could be solved in a more graceful way?