Deployed Angular Application in Azure but on refresh getting URL Rewrite Module Error

Question

We have the angular application deployed in azure, but on refresh application is breaking and we are getting an error, that is saying "The page cannot be displayed because an internal server error has occurred."

Here is the web.config file present in my angular application

<?xml version="1.0"?>
<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <rule name="Angular Routing" 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>
  <httpProtocol>
    <customHeaders>
      <add name="X-Content-Type-Options" value="nosniff" />
    </customHeaders>
  </httpProtocol>
    <staticContent>
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
        <mimeMap fileExtension="json" mimeType="application/json" />
    </staticContent>
</system.webServer>
<system.web>
  <httpCookies httpOnlyCookies="true" requireSSL="true" />
</system.web>
</configuration>

Please help me on this.

Answer 1

The page cannot be displayed because an internal server error has occurred.

• This problem occurs because the server cannot access the configured root directory of the requested location.

  • Make sure that the server can access the configured root directory of the requested location.

• Looks like there is another web.config that conflicts with your parent one in dist and amd.

• The 500 error must locate the problematic web.config file if detailed errors is enabled. In web.config,

<configuration>
    <system.web>
        <customErrors mode="Off"/>
        <compilation debug="true"/>
    </system.web>
</configuration>

• When the angular app was build using

ng build --prod

Two web.config files will be deployed. One is in the root folder, the other in the assets folder.

• Check your angular.json file If you find anything like below

 "src/web.config"

Remove that line

Please refer Ref1 ,Ref2 and Ref3 for more information