Site can't be reached error-After hosting Angular app on IIS 8.0

Question

Recently I have hosted an angular(version 10) web app on our testing server (IIS 8.0). And also installed URL Rewrite Module in IIS also.

And following is my web.config which was added for rules.

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Redirect all requests" 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="./index.html" />
        </rule>
    </rules>
  </rewrite>
  <directoryBrowse enabled="true" />
  <httpErrors errorMode="Custom">
      <remove statusCode="404"/>
      <error statusCode="404" path="/index.html" responseMode="ExecuteURL"/>
  </httpErrors>
</system.webServer>
<system.web>
    <customErrors mode="On" redirectMode="ResponseRewrite">
      <error statusCode="404" redirect="/index.html" />
    </customErrors>
    </system.web>
</configuration>

But after hosting the application the site is running but continuously getting following error site can't be reached as shown in below screen shot. After getting error the URL is automatically reloading within seconds and then site is working as expected.

Following is my app pool setting.

What is the reason for this error ? It is happening without idle time also. Am I missing any IIS setting ? or need to add any other URL writing rule? or any settings need to included on my angular app? Please help me.

[Update]

With the help of debugging tools found that the error is in angular configuration files.

Answer 1

There are two things required:
first you need to install url rewrite by downloading from https://www.iis.net/downloads/microsoft/url-rewrite

then you need to change your web.config file to redirect to index.html file to use angular 2 routing

this is web.config file you can use

<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" 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="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration> 

nothing else is required. my site is also working with same way described above my site is also in angular 10 Ivy

one important thing also is that just give your site main folder permissions to everyone. This occurs for many developers as due to permissions site is unreachable

Answer 2

After little bit of search and with the help of debugging tools finally able to fix the error. Changed the index property with application path in ngsw-config.json

"index": "YourAppPath/index.html"

Which solved the issue. More Details please go through angular documentation here

For details of error please go through this question