URL Rewrite for AngularJS not working in ASP.NET

Question

I just created an asp.net app and have views to different pages like a courses page.

I am running everything on: localhost:50717 on IIS.

I have a routes.html page with an ng-view tag. Initially if I wanted to go to the courses view I would type in: localhost:50717/routes.html#/courses. However I wanted to do some URL rewriting so that I could just do: localhost:50717/courses

So in my JS file I put in:

$locationProvider.html5Mode(true);

In the head of my html page I put in:

<base href="/" />

In my web.config file I put in this code in the system.webServer XML tag:

<rewrite>
  <rules>
    <rule name="RewriteRules" 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>

When I go to: localhost:50717/routes.html and click my link: <a href="courses">Courses</a>

It get me to localhost:50717/courses just fine. This also works fine when I remove that code to enable url writing.

It only when I try to reload the page that I am getting a 404 error or when I try to go to localhost:50717 that it thinks I am going to the base directory instead of the routes.html page.

I even installed URL rewriting on my IIS at: http://www.iis.net/downloads/microsoft/url-rewrite

I went to the "Download URL Rewrite Module 2.0" and clicked on the x64 download link and it downloaded correctly and was able to see the URL rewrite for my default sites in IIS. What else can I do here?

Answer 1

If "/routes.html" represents the root of your website, you must ensure that the contents of that file are returned for every appropriate request to your application.

I.e. when you're calling "/Courses", you get a 404 because there's no content/route/resource corresponding to that URL. What you'd like to return is the contents of "/routes.html" and then let AngularJS routing take over again client side.

I would suggest re-reading AngularJS HTML5-mode; the difference between using "/#/Courses" and "/Courses" is more significant than it might seem at first, reg. how you should set up your routes.