How to debug state change failure

[nigelsim]

Hi have a Hybrid UI-Router app that is having issues when trying to resolve data asynchronously on a fresh page load.

The UI setup is slightly complex. The component nesting is AppRoot -> workspace -> dashboard -> orgadmin modal

Workspace holds the side nav, and is setup as abstract as we never route there. The dashboard is the main view (we intend to have other siblings). The modal is displayed via a ui-view outlet on the dashboard.

Loading the dashboard directly works fine. Navigating from the dashboard to the modal via a uiSref works fine. Loading the modal directly results in a blank page. Checking the DOM, nothing inside the root ui-view has loaded.

The basic setup is:

function uiConfig($stateProvider: StateProvider, $urlRouterProvider: UrlRouterProvider,
    $httpProvider: angular.IHttpProvider, $provide: angular.auto.IProvideService) {
        
    $urlRouterProvider.otherwise('/');

    $stateProvider.state('workspace', {
        abstract: true,
        component: 'workspace',
    }).state('dashboard', {
        url: '^/home?:organisationId',
        component: 'dashboard',
        parent: 'workspace'
    }
}
angular.module('ui')
    .config(uiConfig)

The Angular 7 part is

export const organisationAdminState: Ng2StateDeclaration = {
    name: 'orgadmin',
    parent: 'dashboard',
    url: '/orgadmin',
    component: ModalContainer,
    resolve: [
        { provide: 'modalContent', useValue: OrganisationAdminDialogue },
        { provide: 'modalClass', useValue: 'modal-lg' },
        { token: 'oranisation', resolveFn: resolveOrganisation, deps: [UserService, Transition, '$q']}
        // new Resolvable('organisation', resolveOrganisation, [UserService, Transition, '$q'] )
    ]
};

resolveOrganisation.$inject = ['userService', '$transition$', '$q'];
function resolveOrganisation(userService: UserService, $transition$: Transition, $q: angular.IQService) {
    const resolve = $q.defer();
    // setTimeout(() => resolve.resolve(null), 100);
    resolve.resolve(null);
    return resolve.promise;
}

Note that in this example I'm actually using a dummy resolve method to try to pin down what is happening. If I resolve the value straight away everything loads as expected. If I delay the resolve then it dies.

The transition trace for the failing view is as follows. Note the extra transition at the end. My question is, how would I go about debugging this?

trace.ts?88dd:194 Transition #0-0:   Hook -> onCreate context: orgadmin, function addCoreResolvables(trans)
trace.ts?88dd:194 Transition #0-0:   Hook -> onCreate context: orgadmin, function updateGlobalState(trans) {
    var globals = trans.router.globals;
    var transitionSuccessful = function () {
        globals.successfulTransitions.enqueue(trans);
        globals.$curre...
trace.ts?88dd:194 Transition #0-0:   Hook -> onBefore context: orgadmin, function ignoredHook(trans)
trace.ts?88dd:200 Transition #0-0:   <- Hook returned: undefined
trace.ts?88dd:194 Transition #0-0:   Hook -> onBefore context: orgadmin, function invalidTransitionHook(trans)
trace.ts?88dd:200 Transition #0-0:   <- Hook returned: undefined
trace.ts?88dd:179 Transition #0-0: Started  -> "Transition#0( ''{} -> 'orgadmin'{"organisationId":"10"} )"
trace.ts?88dd:194 Transition #0-0:   Hook -> onStart context: orgadmin, function eagerResolvePath(trans) {
    return new _resolve_resolveContext__WEBPACK_IMPORTED_MODULE_1__["ResolveContext"](trans.treeChanges().to).resolvePath('EAGER', trans).then(_common_common__WEB...
trace.ts?88dd:200 Transition #0-0:   <- Hook returned: undefined
trace.ts?88dd:194 Transition #0-0:   Hook -> onStart context: orgadmin, function (transition) { return start$.next(transition); }
trace.ts?88dd:200 Transition #0-0:   <- Hook returned: undefined
trace.ts?88dd:194 Transition #0-0:   Hook -> onEnter context: workspace, function lazyResolveState(trans, state) {
    return new _resolve_resolveContext__WEBPACK_IMPORTED_MODULE_1__["ResolveContext"](trans.treeChanges().to)
        .subContext(state.$$state())
        ...
trace.ts?88dd:200 Transition #0-0:   <- Hook returned: undefined
trace.ts?88dd:194 Transition #0-0:   Hook -> onEnter context: dashboard, function lazyResolveState(trans, state) {
    return new _resolve_resolveContext__WEBPACK_IMPORTED_MODULE_1__["ResolveContext"](trans.treeChanges().to)
        .subContext(state.$$state())
        ...
trace.ts?88dd:200 Transition #0-0:   <- Hook returned: undefined
trace.ts?88dd:194 Transition #0-0:   Hook -> onEnter context: orgadmin, function lazyResolveState(trans, state) {
    return new _resolve_resolveContext__WEBPACK_IMPORTED_MODULE_1__["ResolveContext"](trans.treeChanges().to)
        .subContext(state.$$state())
        ...
trace.ts?88dd:194 Transition #1-0:   Hook -> onCreate context: [object Object], function addCoreResolvables(trans)
trace.ts?88dd:194 Transition #1-0:   Hook -> onCreate context: [object Object], function updateGlobalState(trans) {
    var globals = trans.router.globals;
    var transitionSuccessful = function () {
        globals.successfulTransitions.enqueue(trans);
        globals.$curre...
trace.ts?88dd:194 Transition #1-0:   Hook -> onBefore context: [object Object], function ignoredHook(trans)
trace.ts?88dd:185 Transition #1-0: Ignored  <> "Transition#1( ''{} -> (X) ''{} )"
trace.ts?88dd:220 Transition #1-0: <- Rejected "Transition#1( ''{} -> (X) ''{} )", reason: Transition Rejection($id: 1 type: 5, message: The transition was ignored, detail: undefined)
trace.ts?88dd:220 Transition #0-0: <- Rejected "Transition#0( ''{} -> 'orgadmin'{"organisationId":"10"} )", reason: Transition Rejection($id: 3 type: 3, message: The transition has been aborted, detail: undefined)