Deploying multiple versions of Angular app to Azure App Service
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/
oren/
- it then uses the capture group to rewrite the path
- it uses regex to capture the language part (2 character language string + slash) from the beginning of the path, for example
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>
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.