Angular Routes not working with cloudfront + s3

Question

Currently only the default route on app start loads for my app in cloudfront. It works when I go to root of site using cloudfront.[address].net I'm also using WAF to limit it to only my IP address, but when I go to cloudfront.[address].net/signup or /login then I get

How can I get the child routes to work too? I have my bucket policy

Bucket Policy

{
 "Version": "2008-10-17",
 "Statement": [
     {
         "Sid": "3",
         "Effect": "Allow",
         "Principal": {
             "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E2SRF18SRG0FC7"
         },
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::[bucket]/*"
     }
 ]
}

I'm blocking all public access, but I'm also using cloudfront with an OAI so I don't think I need to worry about it being blocked since it's going through cloudfront.

I appreciate any help!

Answer 1

You need to set the cloudfront distribution's error document to your entry document(index.html)

Please ensure you have the following steps covered.

1. S3 bucket policy to allow only Cloudfront to do a GetObject
2. Cloudfront distribution's custom error response is set to /index.html for HTTP 404 and 403 error codes
3. Cloudfront distribution is in deployed state, because cloudfront may take longer and we could easily make an observational error

Hope this helps.