Angular - Translations / Localization Tutorial 2024 (i18n)

[@kobibentata]

First of all, allow me to say that this is a very simple tutorial, yet elegantly put and explained straight to the point! What I still lack in knowledge about working this way with i18n is the ability to switch between languages on the fly while the app is running, and not just by setting the default language to another one. Let's say I would like to apply a button that by clicking on it, the current language changes to a selected one.

[@androidsavior]

do you have a video on how to switch the language at run time and switch between ltr and rtl ?

[@LucaDiSabatino-t7p]

what if you use the TranslateService function use(lang: String) referring subfolders (ex. ../i18n/component1/es.json, ../i18n/component2/es.json). The target is to split the translations in multiple files instead of having only one file (ex. ../i18n/en.json or ../i18n/es.json) for every components? I tried calling the translateService in each component with path ('componentName' + 'es') but the last constructor call overwrite the global translateService path :/

[@codedeck]

I have a similar reply to another comment here, but generally you'd need a custom loader. Maybe something like this pastebin.com/raw/ZPr6wAiT. But generally I'd recommend looking up an article on custom loaders with ngx translate.

[@SachinBisht-m8q]

I am facing issue with angular 17 , as i am upgrading my application from 16 , could you please tell me the resolution . Thanks a ton in advance !

[@initialScript]

i have an issue in angular ssr when i do routing for seo like /en /fr but i get error : 'Http failure response for /assets/i18n/en.json: 0 undefined', when i prerender it , do you have any idea how to fix it ?

[@codedeck]

Honestly I'd have to debug the code to give you a proper answer. However based on your error it seems like the http request made by the http client fails to locate the assets folder. Since you are using angular universal (from what I gather), you may want to explicitly declare the path to assets like this app.use('/assets', express.static(path.join(__dirname, '../dist/your-project-name/assets'))); in your server.ts file. If that does not help, I'd suggest debugging with chat gpt to pinpoint the issue.

[@initialScript]

thank you , i will that@@codedeck

[@novatech-42]

sounds good

[@dinocheeta]

can you show for angular 18 version please

[@hafizusman2217]

yes please

[@yeinsdavidllanohernandez1228]

Hi, is there a way to split the en.json file into smaller json files? I'm having a lot of troubles to do it

[@codedeck]

You'd probably need a custom loader for ngx translate (pastebin.com/raw/jPinua4b) or simply use github.com/denniske/ngx-translate-multi-http-loader (scroll down for examples).

[@yeinsdavidllanohernandez1228]

@@codedeck yeah, thanks, yesterday I could finally solved it. Thank you very much!

[@dingmarius]

How to translate text from api (normally like string config) in angular app?

[@codedeck]

If I understood you correctly, usually when dealing with APIs you have two scenarios, in the first you send you language to the backend as a header or cookie and then it responds with a response in that language. In the second one it returns all possible translations and then you need to feed the response through a handler function which picks the langauge matching the one selected by the user. Also, when dealing with things like errors, you could have a list of error codes and their corresponding mappings etc., then the backend simply returns the code and you map it against the FE list.

[@GladiatorGameur]

what if you use standalone components?

[@codedeck]

Hello, I assume that you are referring to a default Angular 17 configuration where there is no app module. In that case you'd need to register the Translate loader in your app config file or directly inside of you providers array in your bootstrapApplication function. Please refer here: github.com/ngx-translate/core/issues/1398

[@maiemad3290]

We need tutorial with transloco

[@JackSparrow-hd3if]

it is not working in angular 17

[@codedeck]

I presume you mean a standalone project? Try making a project with the standalone flag set to false (--standalone=false during generation).

[@SachinBisht-m8q]

@@codedeck for me it is already false , now when ngx translate has been deprecated , i am facing an issue . Need an urgent fix for this .

[@johnandrew721]

@@codedeck I appreciate what you've done here. How about another video for those of us who prefer to use standalone projects?