Configure IIS URL Rewrite module for AngularJS HTML5Mode Still Not Working

Question

I have searched at found some info on configuring IIS URL Rewrite module to work with AngularJS HTML5Mode and even tried the info I found on another question:

How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

I've made the changes to my IIS as displayed in the question found in the link above and set the base URL and the site works when I visit the root site (i.e. http: //localhost/appname/). All of my views and the routing works fine.

However; when I try to visit a specific URL (i.e. http: //localhost/appname/about) in a new tab or browser window, I get a 404. Is there something else I'm missing???

I'm running Windows 7, IIS 7 with the URL Rewrite Module installed.

** I had to space the protocol out to allow the example URL to be accepted.

I'd recommend using either Charles or Dev Tools to view the actual header returned from the .htaccess. It will show the URL that the server is trying to serve up. Then try to hit that URL directly. My gut is that either the "real" URL is broken or the rewrite is forming it incorrectly. — Sharondio
I used Fiddler to watch the response in the direct URL requests I made to actual links that work when I click around and I get a 404 in the response. I also watched the requests when I just click around starting from the root and found that the requests are for the partials (i.e. localhost/app/partials/app.html) instead of what's in the URL (localhost/app/index.html or just localhost/app/) — miguelfeliciano
The request shows the path I have in my templateUrl in my routing instead of using the path value. — miguelfeliciano
I had a similar problem and solved it here stackoverflow.com/a/24921686/965935 — Josh C
See my answer and other answers on this [question][1] [1]: stackoverflow.com/questions/12614072/… — Yagiz Ozturk

stibay stibay · Accepted Answer · 2017-01-12T13:44:21

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

And add this to web.config under system.webServer

<rewrite>
  <rules>
    <clear />        
    <rule name="Html5Mode" enabled="true" stopProcessing="true">
      <match url="^(.+)$" negate="true" />
      <conditions>
        <add input="{REQUEST_URL}" pattern="^(.+)$" negate="true" />
      </conditions>
      <action type="Rewrite" url="/index.html" logRewrittenUrl="true"/>
    </rule>
    <rule name="AngularJS" enabled="true" 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="/index.html" />
    </rule>        
  </rules>
</rewrite>

Here is the full web.config including serving static files.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <clear />        
            <rule name="Html5Mode" enabled="true" stopProcessing="true">
              <match url="^(.+)$" negate="true" />
              <conditions>
                <add input="{REQUEST_URL}" pattern="^(.+)$" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" logRewrittenUrl="true"/>
            </rule>
            <rule name="AngularJS" enabled="true" 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="/index.html" />
            </rule>        
          </rules>
        </rewrite>
        <handlers>
           <clear />
            <add 
                name="StaticFile" 
                path="*" verb="*" 
                modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" 
                resourceType="Either" 
                requireAccess="Read" />
        </handlers>
        <staticContent>
            <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
        </staticContent>
    </system.webServer>
</configuration>

Configure IIS URL Rewrite module for AngularJS HTML5Mode Still Not Working

1 Answers