IIS web.config rewrite rule for MVC/WebAPI with AngularJS in Html5 Mode

web.config

<!-- $locationProvider.html5Mode(true) in app.js and <base href="/"> in head tag --> 

  <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" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

I found that the following rewrite rule works for a Owin 3.1.0 WebApi SPA Template project hosted with IIS Express from Visual Studio 2015. Since this project template uses a public folder to store all of the html the above rewrite rule will not work since the {REQUEST_FILENAME} variable does not include the public folder in the path. For example, if my project is located at c:\testapp and my project folder contains a public folder (so c:\testapp\public) that contains my html, css and javascript and the browser requests index.js the {REQUEST_FILENAME} variable will be c:\testapp\index.js. Why this happens makes no sense, but I have verified that it does with trace logging. To fix my issue I had to use this rewrite rule.

    <rewrite>
      <rules>
        <rule name="Main Rule" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{APPL_PHYSICAL_PATH}public{REQUEST_URI}" matchType="IsFile" ignoreCase="true" negate="true" />
            <add input="{APPL_PHYSICAL_PATH}public{REQUEST_URI}" matchType="IsDirectory" ignoreCase="true" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

thanks @craztjat ! That was helpfull. Alswo i want to add for those from google like me: you may also should include rule for negating xhr (if you're adding scripts dynamically for example): <add input="{HTTP_X_Requested_With}" pattern="^XMLHttpRequest$" negate="true" />

thanks @craztjat ! That was helpfull. Alswo i want to add for those from google like me: you may also should include rule for negating xhr (if you're adding scripts dynamically for example): <add input="{HTTP_X_Requested_With}" pattern="^XMLHttpRequest$" negate="true" />

Gracias compañero. Era lo que necesitaba para que terminara de funcionar mi aplicación con MVC + Angular. Copio finalmente como queda mi ReWrite:

   <rewrite>
   <rules>
     <!--Regla para que no filtre las llamadas a Swagger-->
     <rule name="OpenLIS.API.Swagger" stopProcessing="true" enabled="true">
       <match url="^(swagger)" ignoreCase="true" />
       <action type="None" />
     </rule>
     <!--Regla para que no filtre las llamadas a la API-->
     <rule name="OpenLIS.API.Rule" stopProcessing="true" enabled="true">
       <match url="^(api)"  ignoreCase="true"/>
       <action type="None" />
     </rule>
     <!--Regla para que si lo que se llama no existe (Ni es un archivo, ni es un directorio, ni es una llamada AJAX) entonces
     se redirija al root de angular, para que pueda rutear la applicación.
     Se añade regla XHR para que no filtre las llamadas desde AJAX que utilizan .js que no controlamos como jQuery. 
     Usa el objeto XMLHttpRequest(XHR) para hacer llamadas API del lado del servidor 
     desde el navegador.-->
     <rule name="OpenLIS.Angular.Rule" stopProcessing="true" enabled="true">
       <match url="(.*)" />
       <conditions logicalGrouping="MatchAll">
         <add input="{HTTP_X_Requested_With}" pattern="^XMLHttpRequest$" negate="true" />
         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
         <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
       </conditions>
       <!--<action type="Redirect" url="." /> -->
       <action type="Rewrite" url="." />
     </rule>
   </rules>
</rewrite>