How to build an i18n ionic app with Capacitor?

[sharpSteff]

We are using Angular's build-in internationalization-mechanism to localize our web-app.
https://angular.io/guide/i18n

This generates following out

• www
• • de
• • en-US
• • ....

Each folder contains it's own index.html

However capacitor wants a path directly to a index.html.

$ ionic capacitor copy ios --prod --localize

> capacitor copy ios
✖ copy: 
[error] The web directory (/.../front/www) must contain a "index.html".
    It will be the entry point for the web portion of the Capacitor app.

We like to preselect the language, depending on the device language.
Did someone solve this issue already ?

[imhoffd]

Not easy today, unfortunately. I created #3912 to track this as a feature request.

[sharpSteff]

@dwieeb Thanks for the quick response.
Maybe this is not only related to capacitor.

E.g if you want to host this app as a SPA on a aws S3 bucket or Azure Storage, they request an entry index.html.

So if ionic build (not capacitor) would generate a www/index.html, this might solve both problems.

[sabahallah]

@imhoffd & @sharpSteff
I'm wondering if this resolved or not.
We now architecting an application that will use Angular built-in i18n for multi-lingual app. and with using Angular built-in i18n there would be a separate build for each language. We will use Capacitor as a hybrid mobile solution, but Capacitor copy the application from www directory, in my case there will be folder for each language. So how to handle this in Capacitor, and is it possible to change the URL in runtime as the user change the language.

[sharpSteff]

@sabahallah never tried to solve this. For our usecase a single language for native builds was enough at the end

[zdu-strong]

I use react to develop, react-intl easily implements i18n.

You may refer to my project:
https://github.com/zdu-strong/Technical_Backup/tree/master/capacitor