Angularjs $stateProvider issue

Question

I have those 2 states for my page :

$stateProvider
    .state("page", {
        url: "/:pageId/:pageType",
        template: pageTemplate,
        controller: "contentCtrl",
        resolve: {
            ...
            }
        },
        params: {reload: true}
    })

and

.state("schedule", {
        url: "/Schedule/:scheduleId/:pageId/:pageType",
        template: pageTemplate,
        controller: "contentCtrl",
        resolve: {
            ...
            }
        },
        params: {
            pageId: { squash: true, value: null},
            pageType: { squash: true, value: null},
            reload:true
        }
    })

SOMETIMES, for link's like this :

http://localhost:8182/index.html#/Schedule/691d6981b8dd47e0a158d67cb02b1fee/

the 'page' state is loading instead of the 'schedule' one.

What should I do to fix this?

PS: I'm using AngularJS v1.7.6 and ui-router v0.2.18

Answer 1

The routes are matched in the order they are defined. However, exact matches take precedence over parameterized matches.

I would at first try to change the order of the states.

then I would try to do something like

$stateProvider.state('foo.bar', {url: '/foo/:bar'});
$stateProvider.state('foo.baz', {url: '/foo/baz'});
$urlRouterProvider.when( '/foo/baz', function($state){ $state.go('foo.baz'); } );

Also I see two problems:

1. what's with that uppercase in /Schedule/
2. what's with params: {reload: true}"