Page not found on Amplify after adding Internazionalization to Angular App

Question

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

Accepted Answer

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/`

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.

Answer

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  section:
```

```

Best regards, Andrii

Answer

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

Page not found on Amplify after adding Internazionalization to Angular App

Relevant content