Capacitor and Angular i18n

Ionic Framework Ionic Angular
#1

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.

Internationalization in Ionic 5
#2

@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!!!

@mhartington to the rescue? :slight_smile:

#3

Thanks for the kind words, @Tommertom.

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.

1 Like
#4

In rollup one could put a plugin there to rewrite? Or maybe in package.json something?

Not an expert though…

#5

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 it can be safely assumed that anything outside of the JavaScript payload (i.e. plugins and whatnot) is consistent across all locales, for whatever that’s worth. Android Studio works under assumptions that localization is done with Android string resources, which again is a perfectly understandable design decision, so I would be surprised to find anything on that end that could help me (also factoring in that we need XCode to play in this same sandbox if trying to go that way).

#6

…What did I do?

Whats the tl;dr here?

1 Like
#7

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:

"webDir": "www/ja"
1 Like
#8

Thankyou @rapropos , was having exactly the same issue and I was thinking “surely I am missing something obvious”. But basically no, Capacitor and https://angular.io/guide/i18n don’t play nicely.

We ended up taking a different route which bypasses the issue and so far is working nicely (touch wood) - see here: https://stackoverflow.com/questions/59986140/globalization-internationalization-in-a-cordova-ionic-phonegap-app/64687198#64687198