- Più recenti
- Maggior numero di voti
- Maggior numero di commenti
So I finally found the solution to my problem.
First of all, at the moment of building your localized app with Angular, of course the program creates 2 new dists. Therefore, in the build settings you must change the base directory to:
artifacts: baseDirectory: dist/<your app name, or dist folder>
Once I did it I redirected the / to my english dist. In the second place, I found that in order to automatically detecht the browser language header I should have configured Cloudfront, which would have complicated my infrastructure too much. Therefore, I simply added a dropdown to my app that redirected to the right dist url. Moreover, in case I needed to point to a specific URL I implemented the HashLocationStrategy on angular.
This solution worked for me because I did not need a domain name. However, if you have to purchase a domain, with route 53 it is possibile also to implement a geolocation routing policy to redirect to the proper resource, and the in theory it should be possible to redirect automatically to the right language dist.
Hello.
Make sure your Angular app's base href is correctly set in your index.html file. This is crucial for Angular's routing to work correctly. In your index.html file, you should have a line like this within the <head> section:
<base href="/">
Best regards, Andrii
Hello again. When you implement internationalization (i18n) in an Angular application, the build process will produce multiple versions of your app, one for each language. For instance, if you've set up internationalization for English (en) and Spanish (es), after building, your dist/ folder might look something like this:
dist/
your-app-name/
en/
index.html
...
es/
index.html
...
Each language gets its own sub-directory in the build output. When deploying to a hosting environment, it's essential to configure the hosting service to understand this structure. Best regards, Andrii
Hello Andrii,
Thanks again for your answer. I am aware of how angular internazionalization works and that the hosting must understand the app structure. My question is how to do it on AWS Amplify, since I have little experience on it.
Contenuto pertinente
- AWS UFFICIALEAggiornata 2 anni fa
- AWS UFFICIALEAggiornata 2 anni fa
- AWS UFFICIALEAggiornata un anno fa
Hi Andrii,
Thank you for your answer. Unfortunately the base href is already correctly set in the way you pointed out. Therefore, your solution does not solve the issue.
Thank you again