Angular-ui-router typescript definitions

Question

When we updated our app to use angular-ui-router v1.0.3 we got some problems with the typescript definitions. Since we were using the $stateChangeSuccess event the migration guide told us that we now should use the TransitionService.onSuccess

When everything is compiled to js it works fine, but the problem is that TransitionService do not exist in the Typescript definition file (downloaded using npm/@types) giving us trouble when building.

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/angular-ui-router

By looking in the ui-router source folder within the node_modules folder I can see that there already exist typescript definition files for the source.

1. So are the typescript definitions for @types/angular-ui-router missing the TransitionService?
2. Or should I use the definition files provided with the source? (If so, how?)
3. Some other way?

angular-ui-router api TransitionService: https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html.

Answer 1

I have found the solution on your issue. "$transitions" has type of TransitionService.

You can import TransitionService from '@uirouter/angularjs' in any .ts file of your application. Then just please use dependency injection of angularjs.

router.ts file:

import { TransitionService } from '@uirouter/angularjs';

export class AppRouter {

    static inject = ['$rootScope', '$state', '$stateParams', '$transitions'];

    constructor(
        $rootScope: any,
        $state: ng.ui.IStateProvider,
        $stateParams: ng.ui.IStateParamsService,
        $transitions: TransitionService
    )
    {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }
}

app.ts:

angular
// main module initialization and injecting third party modules
.module(app, [
    'schemaForm', 'ui.router', 'base64', 'ng', 'ngMessages', 'angularMoment'
])
// angularjs configs
.config(routesConfig)
.run(['$rootScope', '$state', '$stateParams', '$transitions', AppRouter])

Please also bear in the mind that other services described on the following page: https://ui-router.github.io/ng1/docs/latest/modules/injectables.html are injectable in the same manner: importing from '@uirouter/angularjs'.

Example:

 import {
     StateService, TransitionService, Transition, UrlRouter, UrlMatcherFactory,
     StateParams, StateRegistry, UIRouterGlobals, UIRouter, Trace, UrlService
 } from "@uirouter/core";