'how to localize angular custom elements

I have successfully built an Angular 12 localized app available in English and French using native Angular i18n support.

My build process generates two versions of the app, the app is accessible with one URL and the web server is configured to use HTTP_ACCEPT_LANGUAGE to serve the correct version of the app to the user.

Now I need to buid another app which will be packaged as a custom element, since I need to embed this app in different WordPress sites in different languages, and this app also needs to be localized.

I will generate the HTML custom tag dynamically, such as <my-app id=25></my-app> ou <my-app id=25 lang=fr></my-app> , where fr is the language used by the WordPress site.

How do I build this custom element in English and French, and how do I load the correct version of the app in the WordPress page?

I have been reading the Angular doc on custom elements and googling on the topic, but found nothing yet.

Please advise.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source