Angular client-side language switching

Question

Background

We are developing an app with Angular 8.2. This question is not related to AngularJs.

Problem

I have read the Angular localization document here: https://angular.io/guide/i18n

But it seems that localization was done in the building process. After the app is built, it can't be changed. So how can we build an Angular app which supports language switching without the internet?

CDN

Our app is deployed behind CDN. The CDN servers reverse-proxy the HTML, JavaScript and CSS files and will cache all files passed. The server-side app language switching is not available.

Electron edition

And we have provided a client-side app based on the electron. We need to deliver the app once and the user can switch between different languages without the internet. But I have found no solution to it.

Domain name

You may mention that we can switch language via the switching the domain. But for CORS reason, our client-side app domain name is limited and can not be switched. So only one domain name is available.

Google Play Store

And we have built and published our app to the Google Play Store via TWA. The domain was registered with the app. Switching domains also cause downloading the app from Store again.

Addition info

And the source code of the app is here: https://github.com/AiursoftWeb/Kahla.App

Just for possible additional info. Don't have to check it for answering this question.

Answer 1

We've faced similar requirements in past and that's why I created a blog post about translations in Angular as a code (without libs just your code and project architecture).

https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc

To answer all of the challenges:

CDN:

• language mutation is on the route level (not domain)
  • domain.com/language/page
• domain.com may include some redirect logic
  • for example, redirect to default language or determine it (we have a cloud function there that does that based on the browser request language preferences

Electron:

• Translations are present on the build time
• Modules containing different i18n data are shipped with the app and lazyloaded when needed (but available for the electron instantly as it is bundled together)

Domain:

• again, language is switched using "route" not domain
  • example: domain.com/en/contact for English domain.com/cs/contact for Czech
• it is great not only because of cors but also because of SEO and Crawlers
  • the most relevant part of the route comes first (language)

Google Play Store:

• same as with electron, it is bundled together
• uses routing not domain

---

Even if you decide not going with the "route" based switching, you may store the translations in your state management or wrapping service and access them as you would do with any other "async" data in the template via async pipe

---

3rd Party: Some other solutions involving 3rd party libs are ngx-translate (deprecated) and Transloco

Answer 2

This has changed in Angular 9 and later. You can now compile application only once and then load translations in a specific language on runtime. Unfortunately Angular does not contain API to get the resource files on runtime but you have to use a 3rd party add-on. One such is Soluling's npm package. Once you use it you can deploy the pplication into single URL and it can serve any number of languages.

I have written a sample that shows this.

Answer 3

You could deliver a file containing the translations with your application. E.g. a translations.json like that:

{
  text: 'this is english',
  textid: 123,
  language 'GB'
},
{
  text: 'это по-английски' ,
  textid: 123,
  language 'RUS'
},
{...}

As that file is part of your project, the user doesn´t need internet access to switch language.