Routing to Angular components when app is static content hosted in S3

Zack, the approach that you've chosen (both the Index document and Error document should be 'index.html') is really bad approach unfortunately.

What will happen is that your users will get a 404 and then redirect - this will hurt your SEO, Chrome will penalise you as it thinks your site is phishing, and Safari support is hit and miss.

Much better option is to:

1. Remove the error page redirection to index.html,
2. Put Cloudfront in front of the S3 bucket
3. Set a custom error response code in cloud front which redirects to /index.html and (MOST IMPORTANTLY!) gives a 200 Http Response Code

Hope that helps

Here is the final solution. Major props to Edmundo.

When setting up the S3 bucket, under Static Website Hosting-->Properties, both the Index document and Error document should be 'index.html'. MAKE SURE THAT THE REDIRECTION RULES ARE BLANK!

In CloudFlare, after the distribution has been enabled and is online, go to Error Pages and create a custom error response. For any 404 error, redirect to /index.html and return a 200 OK status code.

This works like a charm!

All i had to do was set the error document to index.html in my static website hosting block in the console