Trailing slash in url breaks state routing

[jbellmore]

If the url contains a trailing slash the state routing does not recognize the url and transition to the correct state.

For example, if you define the following state:

$stateProvider
       .state('contacts', {
           url: '/contacts',
           templateUrl: '/contacts.html',
           controller: 'ContactsController'
       });

When you go to #/contacts it routes to the 'contacts' state correctly, however if you go to #/contacts/ the route is not recognized.

The only workaround I have found is to define a second route which contains the trailing slash with a different name but that is quite cumbersome to have to do for every single state in an application.

Thanks!

[cayuu]

Edit: mapping optional trailing slashes is default behaviour in Angular $routeProvider: angular/angular.js#784

Yes. This is also the default (and correct) behaviour of Angular's $routeProvider.

To understand why it's not the default behaviour to map URIs, consider that it's like asking the system to treat the resources url/index.html and url/index.html/ as the same thing. Which is usually you "doing it wrong". In some cases, you may want this, but at best it should be a flag (or perhaps an array of urls to map to the state). Or a rewrite rule you custom apply.

But it's worth noting that the existing behaviour is entirely correct.

[jeme]

@cayuu That is unfortunetly wrong.

Angular's $routeProvider does deal with this issue by creating redirection routes for trailing slashes.

Their when function where you can see it happen:

 this.when = function(path, route) {
    routes[path] = extend({reloadOnSearch: true, caseInsensitiveMatch: false}, route);

    // create redirection for trailing slashes
    if (path) {
      var redirectPath = (path[path.length-1] == '/')
          ? path.substr(0, path.length-1)
          : path +'/';

      routes[redirectPath] = {redirectTo: path};
    }

    return this;
  };

And a TestCase testing the behavior:

  it('should match route with and without trailing slash', function() {
    module(function($routeProvider){
      $routeProvider.when('/foo', {templateUrl: 'foo.html'});
      $routeProvider.when('/bar/', {templateUrl: 'bar.html'});
    });

    inject(function($route, $location, $rootScope) {
      $location.path('/foo');
      $rootScope.$digest();
      expect($location.path()).toBe('/foo');
      expect($route.current.templateUrl).toBe('foo.html');

      $location.path('/foo/');
      $rootScope.$digest();
      expect($location.path()).toBe('/foo');
      expect($route.current.templateUrl).toBe('foo.html');

      $location.path('/bar');
      $rootScope.$digest();
      expect($location.path()).toBe('/bar/');
      expect($route.current.templateUrl).toBe('bar.html');

      $location.path('/bar/');
      $rootScope.$digest();
      expect($location.path()).toBe('/bar/');
      expect($route.current.templateUrl).toBe('bar.html');
    });
  });

[cayuu]

Dude you are right about this. And thanks for the test code. My initial comment stemmed from an active project I was hacking on that is not doing this rewiring (because zombies and god knows what else) - but a simple demo shows it works in practice.

Edit: The zombies above happened to be this very project. If you add angular-ui-states.min.js and add the ui-compat injection, all default route re-rewriting stops working. Compare the first fidlle with the ui-router "broken" version

[ksperling]

I was going to add support for this in the $route compat layer, but I'd like to hear some use cases for why this feature should be added to $state itself natively.

The only case where not redirecting to the correct version (whether that's with slash or without) could cause a problem is if you're expecting users to manually type in or edit URLs. Surely any links should be using the correct canonical version of the URL to begin with.

[ksperling]

To be resolved as part of #17

[homerjam]

I ended up here looking for a way to deal with the trailing slash issue. I've configured all routes/states to match a trailing slash then I'm using this snippet to redirect if missing.

// Deal with missing trailing slash
$urlRouterProvider.rule(function($injector, $location) {
    var path = $location.path(), search = $location.search();
    if (path[path.length-1] !== '/') {
        if (search === {}) {
            return path + '/';
        } else {
            var params = [];
            angular.forEach(search, function(v, k){
                params.push(k + '=' + v);
            });
            return path + '/?' + params.join('&');
        }
    }
});  

[timkindberg]

Wow that's great, would you mind if I added that to the FAQ?

[homerjam]

Of course, please do!

[timkindberg]

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes

[oliviert]

Regarding that snippet, search === {} will always return false.

To check for an empty object, use this helper function:

function isEmpty(obj) {
  for (var key in obj) {
    return false;
  }
  return true;
}

[coolaj86]

Better snippet (a la @tomteman):

$urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.url();

    // check to see if the path already has a slash where it should be
    if ('/' === path[path.length - 1] || path.indexOf('/?') > -1) {
        return;
    }

    if (path.indexOf('?') > -1) {
        return path.replace('?', '/?');
    }

    return path + '/';
});

Older snippet:

    $urlRouterProvider.rule(function($injector, $location) {
      var path = $location.path()
        // Note: misnomer. This returns a query object, not a search string
        , search = $location.search()
        , params
        ;

      // check to see if the path already ends in '/'
      if (path[path.length - 1] === '/') {
        return;
      }

      // If there was no search string / query params, return with a `/`
      if (Object.keys(search).length === 0) {
        return path + '/';
      }

      // Otherwise build the search string and return a `/?` prefix
      params = [];
      angular.forEach(search, function(v, k){
        params.push(k + '=' + v);
      });
      return path + '/?' + params.join('&');
    });

Then all routes in app/scripts/app.js must be redefined with trailing /. Note that routes such as /things/:id become /things/:id/ as well.

[timkindberg]

@coolaj86 could you also update the FAQ for me?!