Angular 2 Router On Windows IIS 404 - File or directory not found Solution

Scenario:

When we try to host our Angular 2 on windows IIS , we encounter problem in Angular 2 Routing,

If you try to refresh the same page, or navigate directly to the page using the direct URL ,

You get the error: “ 404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable. “

Resolution Steps:

1         -  Install IIS URL Rewrite Module on your server from here:                          

                     https://www.iis.net/downloads/microsoft/url-rewrite

2      - Configure your Web App:

-  Add Web.config if you don’t have one: 

-        Note: If you use .net or .net core app as angular app you can skip this step (because you already have one).

-        Create Web.config file then add the following,

<?xml version="1.0" encoding="utf-8"?>

<configuration>

  <system.webServer>

    <rewrite>

      <rules>

        <rule name="AngularJS" 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>

</configuration>

Finally Test your App And happy coding J .