How can I use localized assets with angular localize

I would like to use Angular localize (@angular/localize) in one of my Angular projects. Translating texts into different languages was straightforward with the help of the documentation. However, I also have a few localized images, and I can't figure out how to handle those.

If I target two languages, let's say English (en) and German (de), then I have one image per language, for example my-image_en.png and my-image_de.png. The first should show up on the English site, and the second on the German site.

When building my project, a separate folder is generated per language:

- /dist
- /my-site
- /en
- /assets
- my-image.png
- index.html
- ...
- /de
- /assets
- my-image.png
- index.html
- ...




each of which has its own assets folder. It seems logical that there is a way to get my-image_en.png in dist/my-site/en/assets and my-image_de.png in dist/my-site/de/assets, but I can't find anything about that in the documentation, nor when I search for that on the internet.

Does anyone know if this can be achieved with Angular localize? Or is this something I need to configure in the angular.json file?

Continue reading...