Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the best practice for l10n and i18n for Angular project?

I am developing a project with 2 languages: English and French. I need to localize content for two languages. For example different content in header and footer for English and French languages. And also multilingual content (page title, page body etc) on pages will be managed via admin panel.

I need to add a locale to the URL. The URL structure will be the same for various languages. For example:

  • site.com/en/about
  • site.com/fr/about
  • site.com/en/contact
  • site.com/fr/contact

Official Angular docs suggest building and deploying separate Angular projects into separate language folders (in my case: “en” and “fr”). This will prevent caching assets for website and user will have to load everything when switching to another language.

And also I need to run/start a separate project locally per locale. For example:

ng serve --configuration=en
ng serve --configuration=fr --port 4201

Also I need to run CLI command every time I update the language strings:

ng extract-i18n --output-path src/locale

The setup seems a bit complex for me. And it will be even more complex when I am gonna add another language.

Is there a better/simpler way to manage a multi language Angular project with localization (l10n) and internationalization (i18n)?

I need to add a button by clicking on which the URL will change from "/en/about/" to "/fr/about/" for example and vice versa.

like image 748
Vitalii Avatar asked Mar 17 '21 14:03

Vitalii


2 Answers

Transloco is one of the more feature-rich and well-documented i18n/i10n solutions for Angular I've used.

I'm not sure why they removed the feature comparison from their README, but here they've outlined how it stacks up against other solutions. Some of the things that stand out from what you mentioned:

  • Language translations are lazy-loaded at runtime from static JSON assets. Thus, the application loads once and can switch languages on-the-fly.

    • Only one Angular project, so caching works just fine.
    • Users do not have to reload when switching language.
    • New languages are as simple as adding a new JSON file.
  • I18n and l10n support.

I don't know that there is a built-in solution for having the route include the current language. However, it's certainly doable. Here is a Stackblitz example.


(Side anecdote: Our team used to use ngx-translate, but migrated to Transloco over questions about ngx-translate's future.

like image 167
Zack Ream Avatar answered Sep 21 '22 09:09

Zack Ream


For i18n, take a look at ngx-translate. I think it suits your needs. I do not know which option is best for l10n.

like image 24
Gelu Avatar answered Sep 22 '22 09:09

Gelu