Scenario

I have a Angular 18 project deployed on s3. made static web hosting enabled. on s3 block public access is off and the bucket policy is set to allow public read of the bucket. now on the CF end I have set the s3 as origin. Behavior is set to cache optimised, just what a normal s3 setup is done. Error pages for 404 and 403 is set to index HTML with 200 response.

Problem

When I go to a normal page it works fine. but when I go to a page with a query string it strips off the queue strings and give me the normal page. one thing I observed is it does a 302 redirect to the page without the query params. EX - https://mydomain/customer/login?referralId=123 this will take me to https://mydomain/customer/login with a 302.

But when I do same thing with a angular 16 project it gives me 404 and takes me to the actual page with the query params next.

Suspection

On the build output I can see the Angular 18 and 16 have some difference. Angular 16 gives me the bundle but the 18 output gives me the module folders. EX - customer/login/index.html. and this thing is creating some problem for the s3.

I have found some similar case but a bit older.

REF 1

REF 2

REF 3

My Approach

What I see from here is I have to create a lambda function to modify the req. or I have to use a trailing / before the start of query param like https://mydomain/customer/login/?referral=123. or i have to create a object at root to handle this thing.

No solution looks good to me.

I would like to know if anyone has solved this in a better way, or I am missing something at my end.

Things to keep in mind

I don't think this is something at the CF part. I tried this approach with the static s3 URL bypassing the CF but same problem. this only works fine if I am serving from my PC with a temporary HTTP server or doing a ng serve.