setup

I am trying to host an Angular website on Amplify which is using angulars build in i18n (Internationlization). When you build with i18n, you get seperate builds in subfolders. As an example, this is the output for english and dutch:

dist
- nl
-- index.html
-- ...
- en-US
-- index.html
-- ...

Now I want to reroute by default to the english version and to the french one if the user goes to /nl/. To do this, I created the following settings in amplify:

[
  {
    "source": "</en-US/^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>",
    "status": "200",
    "target": "/en-US/index.html"
  },
  {
    "source": "</nl/^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>",
    "status": "200",
    "target": "/fr/index.html"
  },
  {
    "source": "/",
    "status": "301",
    "target": "/en-US"
  }
]

For this setup, I have not setup ci/cd because i am just testing the translations. New files are added by uploading a zip with the content manually.

The app works if you go to www.example.com, www.example.com/en-US or www.example.com/nl.

the issue

If i try to load a subdirectory (for example www.example.com/en-US/somepage or www.example.com/nl/somepage) directly by loading the url in the browser it does not work and I get a 404. Please note that navigating to the www.example.com/en-US/somepage does work if you use the navigation in the app itself. So pressing the button "go to somepage" on www.example.com does work and navigates to /somepage. It is only not working if you try to load the url by itself or refresh the page.