How can I use localized assets with angular localize

Question

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?

Answer 1

You can add a list of assets to each localized build configuration.

In angular.json under projects.<app-name>.archtect.build.configurations add each locale like this:

"en": {
  "localize": ["en"],
  "assets": ["src/assets-en"]
},
"de": {
  "localize": ["de"],
  "assets": ["src/assets-de"]
}