Issue:
In a project I am currently involved in, there is a component that is utilized in two different scenarios. One instance involves calling it from the Material Design system's bottomSheet, while the other requires direct usage through the ui-router state system.
The problem arises with the recent addition of some code to the existing setup. Although all package dependencies are correctly configured within the angular.module statement, an error persists specifically in the new code snippet provided below.
routes.ts
namespace Main {
RouteConfig.$inject = ['$stateProvider'];
function RouteConfig($stateProvider) {
$stateProvider
.state('main.myAwesomeFeature', {
url: '^/myawesomefeature',
component: 'awesomefeature',
resolve: {
awesomeDefaults: () => new Controllers.AwesomeDefaults(1, 2, 3)
}
});
// Additional routing details follow, though irrelevant to the current issue
}
angular.module('app').config(RouteConfig)
}
awesomefeature.ts
namespace Controllers {
export class AwesomeDefaults {
public constructor(
number1: number,
number2: number,
number3: number
) {
}
}
export class AwesomeFeatureCtrl {
public static $inject: string[] = [
'awesomeDefaults'
];
public controller(
public awesomeDefaults: AwesomeDefaults
) {
}
// Other methods and irrelevant content are present here...
}
angular
.module('app')
.controller('awesomeFeatureCtrl', AwesomeFeatureCtrl);
}
namespace Components {
export var awesomeFeatureCmpt: ng.IComponentOptions = {
bindings: {},
controller: 'awesomeFeatureCtrl',
controllerAs: '$ctrl',
templateUrl: '(Irrelevant, as is the HTML)'
};
angular
.module('app')
.component('awesomefeature', awesomeFeatureCmpt);
}
Error: Attempting to directly access the 'Awesome Feature' results in a failure to render the HTML, accompanied by a console error message:
angular.js:14525 Error: [$injector:unpr] Unknown provider: awesomeDefaultsProvider <- awesomeDefaults <- awesomeFeatureCtrl
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=awesomeDefaultsProvider%20%3C-%20awesomeDefaults%20%3C-%20awesomeFeatureCtrl
at angular.js:66
at angular.js:4789
at Object.getService [as get] (angular.js:4944)
at angular.js:4794
at getService (angular.js:4944)
at injectionArgs (angular.js:4969)
at Object.invoke (angular.js:4995)
at $controllerInit (angular.js:10866)
at nodeLinkFn (angular.js:9746)
at angular.js:10154
It seems that the $stateProvider.state({resolve}) mechanism fails to properly resolve the awesomeDefaults and inject its value into the awesomeFeatureCtrl.
Inquiry:
What could be causing the malfunction with the resolve feature which should ideally work seamlessly?
My understanding is that the resolve object executes the designated functions for each named index and then resolves them into the controller associated with the route, as hinted in the UI Router Documentation. There appears to be a misunderstanding or misinterpretation on my part.