Why is refreshing my Angular 6 project on S3/Cloudfront causing errors?

Question

I am having an issue with my Angular 6 project hosted on an S3 bucket with Cloudfront. Every time I refresh, the project seems to be lost and I am redirected to a page that says: What could be causing this? When I refresh on my local server, I am simply logged out and redirected to the login page. I thought this might be a problem with my S3 bucket settings, so I uploaded to the project that I knew was configured correctly (I had an Angular 5 project in there that didn't have the refresh problem). But, the same thing happened so it seems it is something within my project.

Could it be how I compile the files? I am using 'ng build'

Any help is appreciated! Thanks so much.

Answer 1

There are two possibilities:

(1) If your Angular on AWS S3 is client-side-rendered then every time you refresh your website your browser will send a request to AWS CloudFront to acquire the file from AWS S3.

eg. Reloading https://yourdomain.com/contact will actually sending a request to AWS S3 bucket > 'contact' directory > index.html, which is not existing because the page you're viewing is purely generated at client side.

Solution: CloudFront distribution > Error Pages > Create Custom Error Response > Create your custom responses for Error 400, 403, 404.

For example, an custom error response for Error 400:

HTTP Error Code: 400 Bad Request
Error Caching Minimum TTL: 300 
Customize Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200 OK

(2) If your Angular is server-side-rendered, then you have to use your AWS S3 endpoint as the 'Origin Path Name' instead of the autocomplete from AWS dropdown list. For more details, you can refer to: Prerender Angular and Host It on AWS S3

Answer 2

I just set index.html to Error document in the static website hosting and it work for me.