14 Mar

AngularJS URLs missing trailing slash

I ran across this problem trying to deploy an Asp.Net MVC website with an AngularJS front end.  Everything worked fine as long as the site was deployed as it’s own website within IIS, but when we deployed to an Application folder within an existing site things started going wrong.

The problem was that the URLs were not getting their trailing slashes properly.  IIS adds a trailing slash to URLs when the last segment of the address refers to a folder rather than a file.

http://somesite.com/AngularApp should have been converted to http://somesite.com/AngularApp/

Since it wasn’t getting converted I was getting http://somesite.com/AngularApp#/ rather than http://somesite.com/AngularApp/#/

The fix I settled on was to check the URL of the request when it came in and if it matched the root url, but didn’t have the trailing slash, add the trailing slash.  I just added the following code to the Global.asax

protected void Application_BeginRequest()
{
    if (Request.ApplicationPath != "/" 
            && Request.ApplicationPath.Equals(Request.Path, StringComparison.CurrentCultureIgnoreCase))
    {
        var redirectUrl = VirtualPathUtility.AppendTrailingSlash(Request.ApplicationPath);
        Response.RedirectPermanent(redirectUrl);
    }
}

5 thoughts on “AngularJS URLs missing trailing slash

  1. I ended up here after googling for a solution to my problem where a missing trailing slash caused the browser to get stuck in an infinite loop downloading the page and all its resources until it finally crashed.

    While the solution here did not work in my case (my setup is a bit different) it inspired me to a solution which did work)


    protected void Application_BeginRequest(object sender, EventArgs e) {
    //
    // This fixes an annoying bug where the browser gets stuck in infinite recursion downloading the entire page time after time until crashing.
    if (Request.Path.Equals("/dashboard", StringComparison.CurrentCultureIgnoreCase))
    {
    var redirectUrl = VirtualPathUtility.AppendTrailingSlash(Request.Path);
    Response.RedirectPermanent(redirectUrl);
    }
    }

    In my case the angular application is running under http://host/dashboard/ which is referring to DashboardController/Index-action

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>