Issue
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.
Solution
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.