Angular-ui-router typescript definitions
When we updated our app to use angular-ui-router v1.0.3 we were having problems with the typescript definitions. Since we used the $ stateChangeSuccess event, the migration guide told us that we should now use TransitionService.onSuccess
When everything is compiled in js it works fine, but the problem is that the TransitionService does not exist in the typescript definition file (loaded using npm / @ types), which gives us problems when building.
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/angular-ui-router
Examining the source ui-router folder in the node_modules folder, I can see that typescript definition files already exist for the source.
- Also there are typescript definitions for @ types / angular-ui-router that are missing a TransitionService?
- Or should I use source-provided definition files? (If so, how?)
- Another way?
angular-ui-router api TransitionService: https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html .
source to share
I found a solution for your problem. "$ transitions" is of type TransitionService.
You can import TransitionService from "@ uirouter / angularjs" into any .ts file in your application. Then just use angular dependency injection.
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])
Also remember that the other services described on the next page: https://ui-router.github.io/ng1/docs/latest/modules/injectables.html are injected in the same way: import from '@ uirouter / angularjs'.
Example:
import {
StateService, TransitionService, Transition, UrlRouter, UrlMatcherFactory,
StateParams, StateRegistry, UIRouterGlobals, UIRouter, Trace, UrlService
} from "@uirouter/core";
source to share