I am facing a challenge in converting an Angular ui-router configuration file with multiple states and resolves to Typescript. Everything seems to work fine until I introduce the $stateParams, which leads to the 'Unknown provider' error. I have tried including the $stateParams dependency in various places such as the $inject, constructor, .config(), and resolve function as shown below:
interface IMyStateParams extends ng.ui.IStateParamsService {
parentObjectId: Guid;
}
export class listConfig {
$inject = ['$stateProvider', '$urlRouterProvider', '$stateParams', '$qmcPath'];
constructor(private $stateProvider: ng.ui.IStateProvider, private $urlRouterProvider: ng.ui.IUrlRouterProvider, private $stateParams: IMyStateParams, private $qmcPath: string) {
this.init();
}
private init(): void {
this.$stateProvider
.state('client', {
url: '/client/:parentObjectId',
views: {
'main': {
templateUrl: 'MainDetail/',
controller: 'ClientDetailController',
controllerAs: 'detailCtrl'
}
},
resolve: {
clientDetailService: 'clientDetailService',
client: (clientDetailService, $stateParams) => {
return clientDetailService.getClientDetail(this.$stateParams.parentObjectId)
.then(function (data) {
return data;
});
},
clientWVs: function (clientDetailService) {
return clientDetailService.getClientDetailWVs()
.then(function (result) {
return result;
});
}
}
});
}
}
}
(() => {
angular
.module('QMC.Klient.List')
.config(['$stateProvider', '$urlRouterProvider', '$stateParams', '$qmcPath', // more dependencies
($stateProvider, $urlRouterProvider, $stateParams, $qmcPath) => {
return new QMC.Klient.List.listConfig($stateProvider, $urlRouterProvider, $stateParams, $qmcPath);
}
]);
})();
What is the correct way to include a dependency like that?
Ps. I also attempted using this.$stateParams with the same outcome.