How to add trailing slash to fix Angular directive reference

Question

We are developing an Angular application and the app is in an IIS virtual directory.

So the url of the app is: https://domain.com/department/myapp.

By default, IIS does not add the trailing slash in this url and therefore when ui-router added the routing path, it becomes https://domain.com/department/myapp#/home instead of https://domain.com/department/myapp/#/home.

It works fine in latest browsers, but for IE9 it causes a problem.

All my directives are asking for template from a relative url. Without the trailing slash before the # character, the templateUrl in the directive declaration failed to obtain the template html.

Yesterday I thought I could add the trailing slash by doing some url rewrite in IIS. So in my Web.Config, I added:

<defaultDocument enabled="false"></defaultDocument>
<rewrite>
  <rules>
    <rule name="add trailing slash" stopProcessing="true">
      <match url="(.*[^/])$" />
      <conditions>
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Redirect" redirectType="Permanent" url="{R:1}/" />
    </rule>
  </rules>
</rewrite>

Of course, I also installed urlrewrite2 on my IIS.

The result? This rewrite rule breaks my link to minified js and css bundles. While all I need is to get the reference to my app folder correct.

Now I am sitting down and tried to find a proper way to fix it.

Probably need to update the match url of the rule to selectively avoid damaging my reference to those bundles?

Is it possible to add the trailing slash on the client side by AngularJS $location service?

Any advice? Thanks in advance.

Blaise Blaise · Accepted Answer · 2015-01-08T18:36:36

Okay. Here is what I've found so far.

The solution is related to neither url rewrite nor angular $location service. I added a url check and redirect in Global.asax Application_BeginRequest().

Here is the code:

    protected void Application_BeginRequest()
    {
        if (!NeedToProcess(Request.ApplicationPath, Request.Path)) return;
        var redirectPath = VirtualPathUtility.AppendTrailingSlash(Request.ApplicationPath);
        Response.RedirectPermanent(redirectPath);
    }

    private static bool NeedToProcess(string appPath, string reqPath)
    {
        return appPath != null &&
               appPath != "/" &&
               appPath.Equals(reqPath, StringComparison.OrdinalIgnoreCase);
    }

If anyone have better solution, please feel free to add here.

How to add trailing slash to fix Angular directive reference

1 Answers