title: MVC and AngularJS Routing - 403.14 - Forbidden
body: <p>I am having problems getting one of my Angular routes to work in my application.  Basically I have an MVC application that also uses a couple of SPAs.</p>
  
  <p>The MVC routing is as follows;</p>
  
  <pre><code>namespace IMR
  {
      public class RouteConfig
      {
          public static void RegisterRoutes(RouteCollection routes)
          {
              routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
              // Angular reporting routes...
              routes.MapRoute(
                  name: "Reporting",
                  url: "Report/{*.}",
                  defaults: new { controller = "Report", action = "RptIndex", id = UrlParameter.Optional }
              );
  
              routes.MapRoute(
                  name: "Charts",
                  url: "Chart/{*.}",
                  defaults: new { controller = "Chart", action = "ChtIndex", id = UrlParameter.Optional }
              );
  
              // Default home page...
              routes.MapRoute(
                  name: "Default",
                  url: "{controller}/{action}/{id}",
                  defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
              );
  
              routes.AppendTrailingSlash = true;
          }
      }
  }
  </code></pre>
  
  <p>The Angular routes are;</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ImrApp = angular.module('ImrApp', ['ngRoute', 'ui.bootstrap', 'kendo.directives']);
  
  ImrApp.config(
   ["$routeProvider", "$locationProvider", "$sceProvider",
   function ($routeProvider, $locationProvider, $sceProvider) {
    $routeProvider
     .when("/Report", { templateUrl: "/App/ReportForm/rfTemplate.html", controller: "rfController" })
     .when("/Chart", { templateUrl: "/App/Charts/chtTemplate.html", controller: "chtController" })
     .otherwise({ redirectTo: "/Report" });
  
    // Refer to https://docs.angularjs.org/error/$location/nobase for information regarding the "requireBase" parameter.
    // Without this option the error "$location in HTML5 mode requires a &lt;base&gt; tag to be present" is thrown.
    $locationProvider.html5Mode({
     enabled: true,
     requireBase: false
    });
   }]);</code></pre>
  </div>
  </div>
  </p>
  
  <p>The shared layout page uses the following to display a navigation header;</p>
  
  <pre><code>&lt;div class="navbar-collapse collapse"&gt;
      &lt;img class="navbar-right" height="100" src="Images/APLNG_143x143.jpg" /&gt;
  
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
          &lt;li&gt;@Html.ActionLink("Reporting", "RptIndex", "Report")&lt;/li&gt;
          &lt;li&gt;@Html.ActionLink("Charts", "ChtIndex", "Chart")&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I hover the mouse over the "Reporting" navigation item when the page is loaded it displays <code>http://localhost:xxxx/Report/</code> and if I hover over the "Charts" option it displays <code>http://localhost:xxxx/Chart/</code>.  If I select the "Charts" option the page is displayed as expected however if I select the "Reporting" option I get a <code>HTTP Error 403.14 - Forbidden</code> error.</p>
  
  <p>Additionally if I navigate to the "Reporting" page manually by entering <code>http://localhost:60739/Report/RptIndex</code> then refresh the page the address changes to <code>http://localhost:60739/Report/</code> and the 403.14 error is displayed.  Refreshing the "Charts" page however doesn't append the last "/" character on the end of the address and displays the page correctly.</p>
  
  <p>To further confuse matters I set "html5Mode enabled" to <code>false</code> and the navigation still failed but refreshing the page now worked but displayed <code>http://localhost:60739/Report/RptIndex#/Report</code> as the page address.</p>
  
  <p>Even more disturbing is this was all working at one point and then inexplicably "broke".  Comparing the routing code to earlier versions showed there were no changes.</p>
  
  <p>Can anybody give me a clue as to why the "Charts" routing (which is basically identical to the "Reporting" routing) works but "Reporting" doesn't?</p>