Get Angular2 routing working on IIS 7.5

Using URL rewrite module will kill routing path inside application. I've changed Error page for 404 Not Found response to my index.html file. This will not change the URL in browser, but server returns the whole application.

HowTo: Site->Application->Error Pages from context menu on Status Code 404 choose Edit... and choose option Execute URL on this site. Enter /index.html and press OK. Note the path is from site root so you may need to include your app path.

You should be using URL rewrite module to achieve this. A very detailed info on how to use it is provided here

And a sample web.config snippet which worked for me on IIS 8 is here.

(For angular 2, angular 4)

Create a web.config file as in mentioned article.

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

Place it in the root directory (same as index.html) of your site. Mine is in the dist folder (angular-cli project).

After deploying, go to IIS if you have the access and you can click on the rewrite-rules icon and see that it read this config. If you do not see and icon for rewrite rules, you will need to enable the module under "modules" icon. This code snippet was not written by be but I wanted to share better implementation details.

My angular 6 app is running in a subfolder and I had problems with the appoach to redirect into the subfolder. Instead I redirect directly to the index.html

Step 1.) Build angular app with the --base-href flag like this: ng build --prod --base-href /ng/

Step 2.) Create a web.config in this folder with the redirct to the index.html like this:

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