AngularJS + Base Href Case Sensitive?

Question

I\'m struggling to understand why my base href seems to be case sensitive. I have a page with a base href and utilizes angularjs routing.

html:

<         


        

Answer 1

As of today, caseInsensitiveMatch is not included in the stable version of AngularJS 1.0.7 but it is included in the unstable version 1.1.5 (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js) Tested and working as expected

Answer 2

You need to turn off case sensitivity of angularjs route provider.

Please review the detail of this feature: add caseInsensitiveMatch option for url matching

Answer 3

I'm using UI-router, so was not able to resolve the route case sensitivity using the methods suggested for ngRoute. The solution at https://github.com/angular-ui/ui-router/issues/197 worked for me for the routes but not for the base href issue which was the original problem posted.

I was able to resolve this issue by adding a decorator for $browser which sets basehref and url to lowercase. If you look at the origin of the values being compared that are causing the issues in the beginsWith method that is causing the issue, you'll see that they ultimately originate from $browser.

Ultimately, that solution solved for both routes and base href case sensitivity and the $urlRouterProvider suggestion was not needed. So if you don't have an explicitly set base href element in your DOM, the $urlRouterProvider rule suggested in that link would solve your issue. Otherwise, this solves for both base href and for routes.

Full solution which resolved the issue for both base href and routing using ui-router:

  $provide.decorator('$browser', [
                    '$delegate', function($delegate) {

                        var _baseHref = $delegate.baseHref,
                            _url = $delegate.url;

                        $delegate.baseHref = function() {
                            return angular.lowercase(_baseHref());
                        };
                        $delegate.url = function(url, replace) {
                            // no need to modify the setter
                            if (url) {
                                return _url(url, replace);
                            }
                            // just lowercase the getter
                            return angular.lowercase(_url());
                        };
                        return $delegate;
                    }
                ]);

Answer 4

a nice solution to this problem is to create a decorator for $route and set the rules how case insensitives. With this way you don't have to create the field caseInsensitiveMatch for each "when". In this URL you can found more about this solution: http://iranreyes.com/angularjs-decorating-route

Answer 5

The accepted answer will not work since that only effects the routes and not the base url. This is a bug that looks to be "too hard" to fix for the Angular developers. Reference --https://github.com/angular/angular.js/issues/4056

To fix this yourself you need to rewrite the beginsWith() function in angular.js to compare on lowercase --

function beginsWith(begin, whole) {
	if (whole.toLowerCase().indexOf(begin.toLowerCase()) === 0)
	{
    return whole.substr(begin.length);
  }
}

Answer 6

Had the same problem but have a different solution. This works for me and doesn't interfere with routing, beginsWith or the assumption that things are/should be lower case.

Put this before angular is initialized (like in the head of your html page)

// Fix base url being case sensitive
(function () {
     var base = document.querySelector("base");
     var normalized = RegExp(base.href, "i").exec(location.href);
     base.href = normalized ? normalized[0] : base.href;
}());