IIS – Handle 404 with html5mode

In angular2, the default routing uses htm5 notation. no more # in the url.

This causes 404 problems when deploying our application.
for example: if we try to navigate directly to http://www.mydomain.com/customers/5/details , we will get a 404 error.
This is because there is no page that adheres to this url. Only if we start with the index.html and navigate thru our application, we can get to that address – this is because the url is being changed by the router, without ever hitting the server.

To solve this on IIS, we need to:

  1. install URL-REWRITE module from here
  2. create an inbound rule. the rule can be created via the UI (IIS ADMIN) or add the following to your web.config
    
    <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>