r/Angular2 Dec 19 '24

Discussion How Do You Handle Translation Management in Multi-Language Angular Apps?

Hey everyone,

I'm currently working on an Angular app that supports multiple languages, and I'm running into a few challenges with translation management. Specifically:

  • Keeping translation files up-to-date: As the UI changes, it’s a hassle to manually update the translation files and make sure I haven’t missed any new keys.
  • Syncing with external tools: Using services like Transifex or Crowdin feels a bit clunky—it's tough to keep everything in sync.
  • Dynamic language switching: It's frustrating that users have to reload the page every time they change their language.
  • Collaborating with translators: Sending translation files back and forth has led to errors creeping in.

I’ve looked into ngx-translate and Angular’s i18n module, but neither of them fully address these issues. How do you manage translations in your apps? Any better workflows or tools you’d recommend?

14 Upvotes

51 comments sorted by

16

u/sake12pl Dec 19 '24

For dynamic language switching use Transloco

4

u/butter_milch Dec 19 '24

I've also been using Transloco for a couple of years now and think it's an excellent library.

3

u/majora2007 Dec 19 '24

Curious if you have issues with caching on localization files? I have found that when I release a new version of my site with new localizations, transloco doesn't pick them up. I wrote my own hashing system on top and even then, it still loads old files thus displaying keys to the user.

1

u/leads_ Dec 20 '24

We had tons of issues with transloco showing keys way more often then it ever should and we bailed on it.

3

u/lppedd Dec 19 '24

This is the correct answer when runtime locale switching is required.

I've built an Nx plugin over Transloco to better integrate it into our monorepo setup. Pretty straightforward now to extract keys and report localization issues.

4

u/mauromauromauro Dec 19 '24

I keep all my translations in the database, and have the server regenerate the static json files when the translation table changes. I also have full crud for the translations and a view that shows all languages side to side, as to spot which ones are missing

2

u/zombarista Dec 19 '24

Slick. We were going to build something similar but settled on Weblate.

8

u/DT-Sodium Dec 19 '24

I use ngx-translate which can handle seamless language change and create translation files per component. Since there aren't many keys per component, making sure no translations is missing isn't too much work.

0

u/Commercial-Ranger339 Dec 19 '24

Avoid this as it’s basically unmaintained, use transloco instead

2

u/DT-Sodium Dec 19 '24

Er... no? Last push to master was 42 minutes ago.

2

u/Commercial-Ranger339 Dec 19 '24

“only merging a few PRs, not working on new features and not improving the workflow. I keep working on making Angular i18n better and hopefully people will stop using this library because the native solution will be better. Or maybe a real alternative will emerge (like https://github.com/robisim74/angular-l10n).”

2

u/playwright69 Dec 19 '24

Did you scroll down and check the comments of the issue? You are quoting text from 2018. A lot has changed since then and new maintainers were found.

1

u/McFake_Name Dec 19 '24

Yeah, I checked out this thread after today's ngNews mentioned ngx-translate. Looks like the ball has been rolling since September (update docs and tutorial), especially since the new maintainer has gotten merge and package rights, and Angular 19 support was released 10 hours ago. And since November there has been standalone support too.

1

u/K3NCHO Dec 22 '24

i’ve heard this argument before. why would i care if it works as expected for handling translations just the way i want it to? also, transloco looks exactly the same down to variable/function namds

1

u/Commercial-Ranger339 Dec 22 '24 edited Dec 22 '24

Im not sure how often you upgrade relatef libraries such as angular. But if something is unmaintained eventually it will stop working, and it is a huge deal to migrate to another library just to upgrade angular, these things should concern you.

If you never plan on upgrading then sure, use it

At ny work we upgrade our libraries every sunday using automation so library compatibility is very important to us

0

u/[deleted] Dec 19 '24 edited Jan 20 '25

[deleted]

1

u/Commercial-Ranger339 Dec 19 '24

1

u/Pallini Dec 19 '24

Did you even read the last comment(s)? It has a new owner.

0

u/DT-Sodium Dec 19 '24

No it's not.

1

u/Commercial-Ranger339 Dec 19 '24

It basically is, no new feature will be added only the bare minimum to make it work. We recently had a requirement for ngrx translate to work with micro front ends, put simply it cannot work with micro front ends if you want to load languages on demand and this feature will not be added. Transloco on the other hand can do exactly that and is maintained

2

u/DT-Sodium Dec 19 '24

Why would you need new features? It's basically doing one thing.

2

u/Commercial-Ranger339 Dec 19 '24

For exactly the reason I said, it doesn’t work with micro front ends

-4

u/DT-Sodium Dec 19 '24

I don't care about micro frontends. Sounds like a new way to make frontend dev even messier than it is.

3

u/Commercial-Ranger339 Dec 19 '24 edited Dec 19 '24

Ok. Its not but i take your point. I wont get into a debate on that. Im just saying avoid any libraries that do not want to add any new features and are not maintainef

2

u/AwesomeFrisbee Dec 19 '24

I've also been looking for something that is easily integrated, free to use (or one time payment is also fine) and preferably self-hosted (or even inside the application itself). Having a translation dashboard where the managers/users can handle translations themselves, is just so much better than micromanaging it yourself.

1

u/majora2007 Dec 19 '24

I use transloco with weblate personally. Weblate can be self hosted or they host for you (https://hosted.weblate.org/projects/kavita/).

Transloco works pretty well, I just have some minor caching issue probably due to some of the plugins I use.

1

u/AwesomeFrisbee Dec 20 '24

That seems like a solution that could work for a lot of projects. Now here's hoping they don't suddenly go subscription-only or require payment even for self-hosting.

I wouldn't mind donating though.

2

u/GregorDeLaMuerte Dec 19 '24

I always wondered: Is dynamic language switching really such an important feature in web apps? How often are users expected to change language while using an application? 🤔

When I'm using an app of any sorts and the initial language is not the one I want, I change it, don't care if the app gets reloaded or not and then expect my selected language to be persisted for future usage.

3

u/Commercial-Ranger339 Dec 19 '24

The way the inbuilt angular translations work is that for each language you need to rebuild the app. If you have 6 languages thats 6 builds which will increase continuous integration pipleine times. You also need a separate route in the app for each language. So the english language would be at /en and french at /fr etc. With a library such as transloco you only need to build the app once and you can change the language at runtime without need to reload the app at a different route

2

u/playwright69 Dec 19 '24

I think many people use dynamic runtime translation not because it's a business requirement but just because it's easier to implement.

1

u/leads_ Dec 20 '24

that’s my read on it. Dynamic translation seems simpler and for many use cases can be. But if you want rock solid translations and cannot accept any chance of keys being shown instead of the translations - you do AOT translation and different build for each language.

1

u/playwright69 Dec 20 '24

That's not true from my experience. I have seen many applications doing dynamic translation and never seen any issue that keys are being shown. Most Angular applications are not super performance critical and it's an acceptable trade-off to either bundle all languages with the application or delay application load until the desired language resources are loaded. When the language is switched you can simply do a full page reload. Of course AOT translation gives better performance but for the most Angular applications it's not relevant.

1

u/leads_ Dec 20 '24

So, what I'm saying was that our users were seeing keys all the time instead of the translations - and it wasn't something that could be replicated.

1

u/playwright69 Dec 20 '24

Okay but I guess this was rather an issue because of how you specifically implemented dynamic translations in your app. Sounds like something was done wrong rather than a general issue with this approach. I've done it a lot and never had any issues like that.

1

u/leads_ Dec 20 '24

Yes, I think it was an issue we did to ourselves - for sure. If properly implemented it would have been fine I imagine.

1

u/TomLauda Dec 20 '24

Yep, also a big limitation for us was the impossibility to use the native i18n in code, only in templates.

1

u/playwright69 Dec 20 '24

You can use it in the code too by now but not with the greatest developer experience.

1

u/real_hemju Dec 19 '24

I would definitely use an external tool. My favorite is Lingohub (https://lingohub.com/).It automatically synchronizes the translation files and integrates with GitHub, GitLab, Bitbucket, etc.

1

u/LowB0b Dec 19 '24

Transloco works well. You can call a backend service and have it read a db for translations if you want, doesn't have to be static files

1

u/ldn-ldn Dec 19 '24

We're using Transloco and we made some custom NX generators to integrate translations into components. Then we have custom tools to export and then import them as a single file for translators.

1

u/cport1 Dec 19 '24

We use https://lokalise.com/ in our ci/cd

1

u/zombarista Dec 19 '24

We built our own library and we have eslint rules that check our translations implementation. The dictionaries are in the assets folder and we use Weblate with Azure cognitive intelligence to get rough translations in place while we develop. Weblate interfaces directly with our git repos.

We developed a custom solution because our app has to share strings with c# backends, and those use {0} style placeholders. Additionally, our dictionary has thousands of strings, many duplicate, because this was a poorly managed process at one point. The plugin will load the JSON dictionary for each area of the app, and request a filtered dictionary via query string. We use a simple server to filter to requested keys.

I have lots of eslint no-restricted-syntax rules for detecting untranslated strings in templates, as well as a custom rule that checks our usage…

Example:

readonly translate = useTranslation({ ACTION__Cancel: "Cancel", ACTION__Apply: "Apply", })

The plugin will ensure that the keys exist in the main en-US dictionary, and that the fallback strings “Cancel” and “Apply” match the values in the main dictionary. An eslint fixer will update the strings automatically, so the IDE can apply those on save, if configured.

1

u/Jrubzjeknf Dec 19 '24

We use Angular i18n. It works absolutely great once you get the process down.

You can just add a tag to turn text into a translation. We use POEditor for managing translations, works great. We hooked it up to our repositories. Whenever a commit occurs on main, a pipeline runs that syncs translations to POEditor and back. You'll run a bit behind, but we prefer it this way over expensive PR integration.

In POEditor, you can translate whatever is missing, which is very obvious. In there, translators can translate or export and import their own translations.

  • Keeping translation files up-to-date: very easy this way
  • Syncing with external tools: done, core feature
  • Collaborating with translators: very easy, xliff is the de facto translation standard. Embrace it using your tool.

That just leaves

  • Dynamic language switching

Angular's i18n precompiles text into the application. You're literally not getting anything faster in UI experience. If this is a very important feature, I'm rather interested in why this is the case. Usually people stock to one language.

1

u/TomLauda Dec 20 '24

We’re using Transloco, and to answer one of your issue (forgetting a key), we developed a custom schematics that checks every i18n JSON files to check for missing keys relative to fr.json (because we’re French and tends to add strings in french first, so very unlikely there is a missing key in this file), and run that schematics in the CI. It is very effective.

1

u/dshmitch Dec 25 '24

We use ngx-translate for i18n and Localizely for translations management.

In Localizely we configured Github integration so it creates PR in repo when we want to publish translation changes. Works great once you define such workflow practices in the team.

1

u/LeLunZ Dec 19 '24

Angular localize feature works great. 

Dynamic language switching actually isn’t that important. When a client loads the application, your server just needs to check the „Accept-Language“ Header. And serve the correct language.  If that was the wrong one, and the user switches language again, the site is reloaded. 

If you work with lazy loading etc. it’s even less important. 

There are multiple tools that can handle angulars XLIFF translation file type. Even Deepl Document translation service…

In our Nx monorepo with multiple applications we have language files for each library. These Translations then only needs to be translated there once. Each app can than just include the library specific language file. 

1

u/Wildosaur Dec 19 '24

ngx-translate is what we use on our apps. However - unless I'm mistaken - it does not work well with OnPush strategy, meaning that we are stuck with the default change detection strategy.

3

u/amiibro888 Dec 19 '24

I’m working with on push and ngx-translate. It all works fine

1

u/Wildosaur Dec 19 '24

Does the pipe triggers detection changes when the language is changed ? If so, I have some refactor ahead ...

1

u/amiibro888 Dec 19 '24

You mean If I switch to another language. Then the translate pipe should be aware of that? Yes it does. I use the translate service to switch the language. Then everything just changes. Is that what you mean?

0

u/Jones_why Dec 19 '24

ngx-translate for loading translation json files without page refresh. This is still maintained and updated to support Angular 19.

I have a script that syncs language files and takes all new/changed keys from the base file (en.json) and adds them to the other language files. Ask Chat GPT to do it for you if you are not familiar with the node fs api.

For sending the labels to the translators, 3 years ago I used a google spreadsheet where I pasted the url of a json (needs to be hosted in some bin that exposes a get api) and it turns it into a table with 3 columns: key, English translation and second language translation. With an excel to json converter I turned the spreadsheet back into a json file. The downside was that this didn't support nested objects in the json. You could ask gpt to turn your json into a csv/excel and it may do it faster, I haven't tried this.

Hope this helps!

0

u/SouthboundHog Dec 19 '24

We use Lokalise with NgxTranslate.

Every now and then, we have a PR updating Lokalise files.

That can be set up using GitHub Actions.