9

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.

2 Answers 2

12
+300

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.

1
  • 1
    Thank you very much for your comment. You provided extremely valuable info for the consideration.
    – Vitalii
    Mar 23, 2021 at 21:56
4

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

1
  • 1
    Thank you for your suggestion. It seems like a good solution for the i18n.
    – Vitalii
    Mar 18, 2021 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.