Angular routing is not working with Cloudfront and S3

Please have a look at : how to deploy react and angular apps to S3/Cloudfront

Have you created a custom behavior for 403 (Forbidden) and 404 (not found) responses?

Every time that someone does a request to your website, for example, www.yourwebsite.com/routeuri, note that this URI routeuri does not exist in your ORIGIN (which is S3 BUCKET), so your origin (S3 BUCKET) will return 403 response (Forbidden). So you should also added a custom error response for 403 status code, as shown in image below:

Please also make sure that your also added index.html as a Default Root Object in both Cloudfront and S3 Bucket as shown by images below:

I really recommend read official documentation to understand about CloudFront relationship with origin.

In my case this could be solved by adding index.html as the 'error document' under 'static website hosting'. Nothing else.

This happened to me too and I fix it adding a custom error response in the CloudFront settings:

This happens because when you configure the CloudFront to be the only available access for the S3 bucket and you search /something, cloudfront will try to return that file to the user browser. Now the bucket is private and is only accessible from the CF, so this will return 403 or 404 error.To solve it, you need to return index.html when those errors happen.

Credits: https://lucasfsantos.com/posts/deploy-react-angular-cloudfront/