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.