CODEWITHSUNDEEP
angularazureinternationalizationazure-web-app-serviceweb-config
dna
dna

Reputation: 626

Error Deploy Angular I18n on Azure App Service

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:

enter image description here

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

Upvotes: 1

Views: 542

Answers (2)

jug
jug

Reputation: 451

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>

Upvotes: 0

Delliganesh Sevanesan
Delliganesh Sevanesan

Reputation: 4776

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

Upvotes: 1

Related Questions