Is anybody using the Angular localization / i18n system with Capacitor? If so, can you share how you handle the fact that Capacitor gets uncomfortable with the notion that one project does not necessarily build down to a single www object code tree with an index.html at top-level?
The most closely-related discussion I could find is #691 involving multiple apps in a monorepo, and I’m not yet sure how relevant I really think it is.
Things I can think to do so far:
manually intervene in the build process to hoist a particular language’s build up to top level temporarily, run npx cap copy, then stuff the localized build back down into its locale directory;
add a CLI argument to cap (like locale) that effectively gives cap an “active” subdirectory under www that it should treat the way it treats www itself currently;
try to figure out a way to munge about in angular.json in order to ask Angular to put a particular language at top level;
cry in beer
To replicate the problem, simply follow the Angular localization documentation and build with localize set to true. Instead of having all the project object code be under www, you should see it under www/fr (or whatever language you chose). Then run npx cap copy and you should be greeted with:
[error] The web directory (/path/to/project/www) must contain a "index.html".
It will be the entry point for the web portion of the Capacitor app.
Look a little deeper, my friend. index.html is just one directory down, in www/ja.
@rapropos, for all the work and effort you have put in the forum, supporting many people relentlessly and with much patience, I think the full Ionic Dev team (and/or Angular) should help you with this one!!!
If you have just a single locale, there is a way to do this by simply tacking the locale subdirectory on to webDir in capacitor.config.json, but that obviously doesn’t scale to multiple locales at once.
Perhaps this is going to end up being something simply out of Capacitor’s scope, but if there was some sort of turnkey solution, I (at least) think it would make a great selling point for Capacitor itself to be able to build for multiple locales in some sort of at least quasi-automated fashion.
Yeah, in package.json you can tell Angular to build en, fr, de and it’ll make them all in parallel, with (customizable) baseHref settings so they can all be served from the same httpd. In an ordinary Angular CLI setup, you end up with dist/en, dist/fr, dist/de, and so forth.
That part is super-smooth, but Capacitor (sort of understandably, I guess) assumes there is a 1-to-1 mapping from a top-level Ionic project to an Android or iOS project, which it then washes its hands of and hands control off to Android Studio or XCode. Since the actual responsibility for building anything past that point lies outside of Capacitor, it might be a tough sell to ask Capacitor to do anything beyond potentially making android-en, android-fr, android-de, and frankly the utility of that feels rather minimal, especially considering how much bloat it induces.
I think just have the misfortune to be somebody more knowledgeable and better-connected than me.
Angular has the ability to make multiple localized builds at once. It would improve my quality of life if I could figure out how to get Capacitor to play along somehow, but I don’t have any great actionable ideas, so I was asking for brainstorming suggestions from other developers who are using Angular’s localization system to deliver Ionic apps.
For more TLing:
The more I think about it, though, maybe the whole idea is fundamentally incompatible with the way people tend to distribute IPAs and APKs, in that I guess you want one universal binary instead of a bunch of localized ones. It still makes sense for PWAs, maybe, but they don’t get built the same way.
My specific use case here, with base source in en-US and a single deployment localized for ja-JP, looks to be covered by changing capacitor.config.json:
Sorry to reply to an old post but I guess this hasn’t got much attention and it’s still an issue. Even by adding "webDir": "www/lang_code_here", capacitor still doesn’t like it and can no longer read basic files like main.js, polyfills.js etc (returns 404).
ngx-translate hasn’t been updated in 2 years, the developer quit on it. It’s buggy when it comes to splitting the translation .json into multiple ones in order for them to be used in separate modules in angular.
Any chance there’s going to be support for multiple index.html files, or something similar?