using caseInsensitiveMatch with stateProvider

[graphicsxp]

In AngularJS RouteProvider, the attribute caseInsensitiveMatch can be used on each individual routes.

How do I do that with the stateProvider ?

[ksperling]

It's not supported by $stateProvider at the moment.

What's the use case for this? Are you getting users to type in URLs to states manually, or why would the links not end up matching the case of the URL as defined in the state?

[graphicsxp]

yes, it's exactely that. I've got users typing or pasting a URL which contains upper-case letters and they get a 404.

To workaround this issue, I've used a URL rewrite rule on the server to force lower-case, but then I get a lot of 301 requests, which is not ideal.

In my opinion this is a must-have feature to be able to run case-insensitive requests.

[ksperling]

If they were pasting surely the case would be correct?

Anyway you should be able to do something like this:

$urlRouterProvider.rule(function ($i, $location) {
   var path = $location.path(), normalized = path.toLowerCase();
   if (path != normalized) return normalized;
});

[graphicsxp]

sometimes the url is copied from some Excel sheet with bad formatting. Anyway, that's not the point. They often type with the caps lock key on too.

Thanks for this code. Where should I use it ? I've tried to put it in the .config() but it fails as $location is undefined :

angular.module('myApp', [deps]).
config(function ($routeProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/404');

    $urlRouterProvider.rule(function ($i, $location) {
        var path = $location.path()
        var normalized = path.toLowerCase();
        if (path != normalized) return normalized;
    });

    $locationProvider.html5Mode(true);
 });

[ksperling]

try removing the $i parameter, the arguments for urlRouter rules change between different versions of ui-router

[graphicsxp]

Yes, that works fine now. Thanks a lot !

[graphicsxp]

I'm reopening this issue because I've noticed that my base url is case sensitive. This thread on SO explains the issue: http://stackoverflow.com/questions/14994324/angularjs-base-href-case-sensitive

Adding the custom rule to UrlRouteProvider works fine for the part AFTER the base URL. However if the base URL is entered in upper-case, then it does not work because the base URL is defined in lower-case in my index.html page.

The fix provided on SO is for the routeProvider of AngularJS. What should I do to fix this with the $UrlRouteProvide ?

[timkindberg]

@ksperling What is the latest set of parameters for the rule() method? I want to add it to the wiki! It is $injector and $location in the src currently, but are you saying that $injector is now removed?

[vvolodin]

I'm having the same issue with base href being case sensitive.

[devmondo]

same goes here

[nateabele]

Plunkr?

[vvolodin]

How can one test base url in Plunker?

[nateabele]

<script>
document.write('<base href="' + location.toString().toUpperCase() + '" />');
</script>

?