Deploying multiple versions of Angular app to Azure App Service

We had also the problem for our i18n multi-languages website created by angular-cli.

What you need:

1) ensure that you have only 1 web.config in the root folder (not under ./fr or ./en)

2) ensure that your fr/index.html has the right base tag

<base href="/fr/">

3) ensure that your en/index.html has the right base tag

<base href="/en/">

4) the content of your unique web.config needs to include the following code:

<?xml version="1.0" encoding="UTF-8"?><configuration>  <system.webServer>      <rewrite>        <rules>            <rule name="SPA Routes FR" stopProcessing="true">                <match url="fr/.*" />                <conditions logicalGrouping="MatchAll">                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />                </conditions>                <action type="Rewrite" appendQueryString="true" url="fr/index.html" />            </rule>            <rule name="SPA Routes EN" stopProcessing="true">                <match url="en/.*" />                <conditions logicalGrouping="MatchAll">                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />                </conditions>                <action type="Rewrite" appendQueryString="true" url="en/index.html" />            </rule>        </rules>    </rewrite>  </system.webServer></configuration>

The "appendQueryString" is needed if you have some query parameters with your URL.

For anyone looking for a generic solution see below.

It does 2 things:

• Handle default language via redirect (our default language is de)
• Handle rewires for any language
  • it uses regex to capture the language part (2 character language string + slash) from the beginning of the path, for example de/ or en/
  • it then uses the capture group to rewrite the path

Note:

• This will not limit which language codes a user can request via url
• If you want to be specific which languages are supported you can replace the regex with the following to only support de + en + fr:
  ^((?:de|en|fr)\/).*

<?xml version="1.0" encoding="UTF-8"?><configuration>  <system.webServer>    <httpRedirect enabled="true">      <add wildcard="/" destination="/de" />    </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>

I think we have to have specific routes to each locale something like the below

<configuration><system.webServer>    <rewrite>        <rules>            <rule name="Angular Routes fr" stopProcessing="true">                <match url="fr/*" />                <conditions logicalGrouping="MatchAll">                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />                </conditions>                <action type="Rewrite" url="/fr" />            </rule>            <rule name="Angular Routes en" stopProcessing="true">                <match url="en/*" />                <conditions logicalGrouping="MatchAll">                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />                </conditions>                <action type="Rewrite" url="/en" />            </rule>            <rule name="Angular Routes default" 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="/en" />            </rule>        </rules>    </rewrite></system.webServer>