Hiding en/es from URL of IIS-hosted Angular 16 web app with i18n enabled

Question

I have an Angular 16 web app. Users access it like this: www.myapp.com or www.myapp.com/workspace or www.myapp.com/data/members etc. The web app is hosted in IIS (Azure App Service). Everything works great.

I've just enabled native Angular i18n for English (en) and Spanish (es), which builds to two subfolders inside /dist: /en/ and /es/. Without any IIS rewrite rules, users would have to browse to www.myapp.com/**en**/workspace or www.myapp.com/**es**/workspace to access the site.

How can I adjust IIS rewriting rules (inside the web.config) to make sure that my users don't see any difference in how they access the site, so that www.myapp.com/workspace still works without any en or es in the URL, while being directed to the right language subfolder behind the scenes based on their HTTP_ACCEPT_LANGUAGE?

I've attempted some rewrites on my own and with the help of google/chatgpt/bard, and none of it works. My only starting rule prior to i18n is for Angular routing. What should I add/adjust and in which order (do I need a single web.config at the root, or also inside /en/ and /es/ subfolders)?

<rule name="Angular Routes" stopProcessing="true">
    <match url=".*" />
    <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/index.html" />
</rule>

Answer 1

If you want to hide en or es, you can use this case as a reference:

<rewrite>
  <rules>
     <rule name="hide en" stopProcessing="true">
       <match url=".*(en)(.+)" />
       <action type="Redirect" url=www.myapp.com/workspace{R:2} appendQueryString="false" />
     </rule>
  </rules>
</rewrite>