Please critique this idea for setting up internationalized Angular project. This is Angular 11.
I'm using the Angular I18N (https://angular.io/guide/i18n) method up to the point of deployment. From there, I essentially subvert the formal Angular way to what I think is a simpler set up.
Background:
We are using the Angular I18N to isolate strings, move them to xliff files, translate them, build localized copies of the application, and using LOCALE_ID to make sure the date, decimal, etc pipes appropriately localize (https://angular.io/api/core/LOCALE_ID).
The ng build --prod --localize builds N copies of the application with each one in a different folder. N is the number of locales specified in angular.json: /projects/.../i18n/locales plus the sourceLocale. E.g., if my source is 'en-US' and I have 'es' and 'fr' defined, the distribution has three folders 'en-US/', 'fr/', 'es/'.
An observation that will be important shortly is that each folder has many files which are nearly all identical. In our case, each folder has about 70 files totaling about 1 MB. Across folders, the files are identical except index.html and main.###.js. The index.html differs only by <html lang...> and <base href...>.
Everything up to here follows the Angular documentation (https://angular.io/guide/i18n) and works fine.
If you deploy at this point, your application may be accessed by users by specifying their language of choice in the URL. .../your-app/en-US, .../your-app/es, etc. There are no files at root, so .../your-app displays nothing.
Angular recommends configuring your server to redirect to the appropriate folder based on the http header value for accept language. That might work for some. We have a couple of issues with that: (1) access to server set up is limited, therefore it is preferable that we do the redirect client side. (2) The browser language is not necessarily the best choice. We want users to be able to set the language for the application. Until the user tells us, we will accept the browser language as a default. But the user override is important.
My first idea was to move all the files from /en-US into root. Now, there's a default application at .../your-app/. That can redirect based on language. However, to handle deep links would require a router imbroglio to be avoided.
The Plan
My current idea which seems to be working well is, after the build in the dist folder:
Move all the files from en-US to root.
Move es/main.###.js to ../main.es.###.js, fr/main.###.js to ../main.fr.###.js, etc.
Delete all the subfolders. (Note how much smaller the distribution is now.)
Alter index.html as follows:
4a. Update <base href='/'>
4b. Include a script which detects the user's preferred language.
4c. In JS, create a script element, set the source to main.?lang?.###.js, body.appendChild(script).
4d. Remove from the end of body <script src="main.###.js></script>
This works well. Deep links work fine. No routing to configure.
Anyone see issues?
Obviously one is: "Angular might change things in the future that break this." But that's ALWAYS a problem.