Error Deploy Angular I18n on Azure App Service

Question

I have an Angular application that uses i18n. I have 2 packages: fr and en-US. I added a web.config to the root of my root folder

<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-US" />
            </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="/fr" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration

The contents of the wwwroot folder are as follows:

When I try to access https://domain.azurewebsites.net/en or https://domain.azurewebsites.net/en or https://domain.azurewebsites.net/ I always have an error 404

Answer 1

Thanks @hugo your steps worked for me.

You need to follow the below steps to fix the issue:

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:

    < 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>
   

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

Answer 2

Here my web.config with de mime. Withtout mime it didn't work for me

<configuration>
<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
    </staticContent>
    <rewrite>
      <rules>
        <rule name="Main Rule" 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="/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>