Symfony and Angular: shared translations

Angular for frontend with symfony delivering the data have become quite a common setup.

When working with this constellation you will sooner or later come across the i18n topic. Most likely you would want to share translations between front- and backend. So that you could keep translations in one single location while using it for frontend templates as well as server-side error messages etc.

One approach would be to store translations in the symfony yml or xml files and deliver those to the frontend via an api endpoint.
Given that front- and backend-code run on the same server, there is an even simpler solution.

Since symfony does not only read yml or xml but also translations in the json format, you can simply keep translations in the frontend and read those files with symfony directly.

All you need to do to achieve this is symlink the angular translation files to your symfony translation catalog location.

messages.de.json -> ../../../web/ng/I18n/de_DE.json
messages.en.json -> ../../../web/ng/I18n/en_EN.json

Disclaimer: This works only for relatively simple use cases with no complex translation patterns. But hey…

Leave a Reply

Your email address will not be published. Required fields are marked *