Error on refreshing routes for Angular app hosted on S3

Question

I have just created an angular app which communicates with some independent AWS services for data. I have hosted the Angular bundle on AWS-S3.

The basic app loads fine, however when I try to refresh any page, I get an Access Denied error as below. I have tried to figure out the issue and realized that on refresh the server tries to reload exactly the same route. For ex:

If I am on a route https://domain-dev-static-ops.s3.ap-south-1.amazonaws.com/login and refresh the browser, the S3 tries to find a login.html resource which is obviously not available.

To fix this: I have tried to redirect all the not found resources to index.html as explained in one of the SO answers. However, this didn't resolve the issue and I still get the following error.

Can someone please help me resolve the issue and since I am hosting on S3 for the first time, I would really appreciate if someone can suggest is it really recommended to deploy an Angular app on S3.

Thanks

Answer 1

Go To > S3 Bucket > Properties > then got to Static website hosting > then set Index document and error document as the same file name and save.

Note: If you are using route 53 URL then check cloud front to mapped URL from S3 to route 53.