Issue when a query string is used on a base url (html5 mode) without a trailing slash

[cadilhac]

Using Angular 1.5 in an asp.net mvc site.

I have a base tag:

<base href="/fr/">

and html5mode is set.

The site works perfectly. I use ui-router... no issues.
But today I hit one and this is when I try to browse to this kind of url:

http://example.com/fr?arg=1

I get an error from angular:

url is undefined
trimEmptyHash@http://............/angular.js?tag=2016020919:12165:3

If I navigate to /fr/?arg=1 (with the trailing slash) the error goes away.

In this context, is this a bug? How to get the query string to work without a trailing slash? "Normal" people typing a url normally will never put a slash before the question mark...

Note: I don't know if this is a ui-router or an angularjs issue. I checked this and tried the 2 mentioned solutions but it didn't change anything (a breakpoint in the rule and I see the rule is not even called).

[cadilhac]

I traced into angular code, especially $$parseLinkUrl in the LocationHtml5Url function.

  this.$$parseLinkUrl = function(url, relHref) {
    if (relHref && relHref[0] === '#') {
      // special case for links to hash fragments:
      // keep the old url and only replace the hash fragment
      this.hash(relHref.slice(1));
      return true;
    }
    var appUrl, prevAppUrl;
    var rewrittenUrl;

    if (isDefined(appUrl = beginsWith(appBase, url))) {
      prevAppUrl = appUrl;
      if (isDefined(appUrl = beginsWith(basePrefix, appUrl))) {
        rewrittenUrl = appBaseNoFile + (beginsWith('/', appUrl) || appUrl);
      } else {
        rewrittenUrl = appBase + prevAppUrl;
      }
    } else if (isDefined(appUrl = beginsWith(appBaseNoFile, url))) {
      rewrittenUrl = appBaseNoFile + appUrl;
    } else if (appBaseNoFile == url + '/') {
      rewrittenUrl = appBaseNoFile;
    }
    if (rewrittenUrl) {
      this.$$parse(rewrittenUrl);
    }
    return !!rewrittenUrl;
  };

For a url like /fr?arg, appBase has a trailing slash and url has not, so rewrittenUrl is never set.
For a url like /fr/about?arg, appBase with its trailing slash is contained in the url, so rewrittenUrl is set.

[gkalpak]

I don't think you need a trailing / in your base URL. Have you tried removing that ?

[gkalpak]

Hm...omitting the trailing / will break relative URLs to assets, so it's not really useful.

One thing that seems to work is including the filename in baseHref (in fact including anything after the trailing /, such as xyz or even . seems to work - at least on Chrome, Firefox and Edge).
E.g. change <base href="/fr/" /> to:

• <base href="/fr/index.html" /> or
• <base href="/fr/xyz" /> or even
• <base href="/fr/." />

[cadilhac]

No it doesn't work. And anyway, after tracing into $$parseLinkUrl again, I don't see how it could work.

[gkalpak]

@cadilhac, you mean appending something after the / doesn't work ?
(It worked for me in a plnkr 😕)

[cadilhac]

Yes I mean that. Can you show me such a plunker?
Also remember that this issue happens when a user types the url in the address bar of the browser, not when following an internal link to the base url containing a query string. How can you achieve such a test with a plunker?

[gkalpak]

@cadilhac, you are right, I missed that. Would it work if you configured your server to rewrite /fr as /fr/(as a workaround).

I'm not sure if ignoring the trailing slash might break other usecases.
/cc @petebacondarwin (who knows his way around $location 😄)