I am kind of new to the AWS world and cloud development so I do not know what am I doing wrong. I created my Angular App and I decided to host it on AWS Amplify.
The app was working perfectly until I decided to implement internazionalization by following the official Angular guide: https://angular.io/guide/i18n-overview
Once I implemented the two languages the app works great on my localhost but stopped working on AWS Amplify. In there the app successfully pass every stage (provision, build and deploy) but if I click on the provided link it fails to load the page and it returns a 404 page not found error.
What am I doing wrong? Should I change the Amplify YAML building file? If so how?
Thank you in advance
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.