Otherwise for states with typed parameters

Question

I started using typed parameters (such as {id:int}) in my route configuration. If a state doesn't match because of the type, otherwise does not appear to trigger.

For example:

$stateProvider
    .state('stuff', {
        url: '/version/{version:int}/stuff',
        templateUrl: // ...,
        controller: // ...
    })
    .state('list', {
        url: '/list',
        // ...
    });

$urlRouterProvider.otherwise('/list');

If the version is "x" (not an int), I am not redirected to the list page. Instead I end up on an empty page with no errors in the console.

How can I fix this?

(Clarification: I'm typing in invalid URLs in the address bar to test this, not using ui-sref.)

Update: I believe I've found what's causing it (thanks to @RadimKöhler for an example that eliminated some possibilities). See my plunk.

Everything works fine except for URLs that fail to match a custom type built with $urlMatcherFactoryProvider.type(). I used a guid type based on the answers to this question.

I can work around this by using regular expressions in the URL, but it would be nice to have a fix.

More info: Adding pattern to the custom Type object appears to fix this. The pattern has to leave out the anchors (^$), so something like:

pattern: /[a-f\d]{8}-(?:[a-f\d]{4}-){3}[a-f\d]{12}/i

Answer 1

I'd say, that the concept as you wanted, is working. There is a working example

this state def (1:1 to question)

$stateProvider
  .state('stuff', {
    url: '/version/{version:int}/stuff',
    templateUrl: 'tpl.html',
    controller: 'StuffCtrl',
  })
  .state('list', {
    url: '/list',
    templateUrl: 'tpl.html',
    controller: 'ListCtrl',
  });


$urlRouterProvider.otherwise('/list');

will properly handle these links:

// list
<a href="#/list">

// ui-sref
<a ui-sref="stuff({version:1})">
<a ui-sref="stuff({version:2})">

// href
<a href="#/version/12/stuff">

these will not work (as expected) - so they will not created any href (such state with such params does not exist)

<a ui-sref="stuff({version:'A'})">
<a ui-sref="stuff({version:'xyz'})">

these href will be redirect to otherwise

<a href="#/version/x/stuff">
<a href="#/version/AB/stuff">

Check it in action here