Angular i18n hosting in Azure

1. Ensure that your different language index.html files have the right base tag:

<base href=”/en/”>
<base href=”/es/”>
<base href=”/fr/”>

The / on the end is very important, otherwise it won’t work.

This can be done in angular.json by:

“i18n”: {
“sourcelocale”: “en”,
“locales”: {
“es”: {
“translation”: “src/locale/messages.es.xlf”,
“baseHref”: “es/”
}
“fr”: {
“translation”: “src/locale/messages.fr.xlf”,
“baseHref”: “fr/”
}
}

2. Add a web.config in the root folder where the language folders reside:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpRedirect enabled="true">
      <add wildcard="/" destination="/en" />
    </httpRedirect>  
    <rewrite>
      <rules>
        <rule name="angular" stopProcessing="true">
          <match url="^(.{2}\/).*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This will redirect the root url requests to the selected language folder.
destination sets default language folder if no language folder is selected to “/en”.