UI Router не работает с компонентными состояниями

Question

Фон:
В приложении, над которым я работаю, у нас есть компонент, который используется в двух местах. В одном месте это вызывается из материального дизайна bottomSheet система. В другом мы используем компонент напрямую через систему состояний ui-router.

Вот установка, которая вызывает проблемы. У меня уже есть angular.module Заявление, в котором установлены все надлежащие зависимости пакетов - я уже несколько месяцев работаю над этим приложением со своей командой, проблема заключается именно в приведенном ниже коде, который я только что добавил.

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)
                }
            });

        // Other routing minutiae, unimportant to the question
    }

    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 stuff...
    }

    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);
}

Проблема: всякий раз, когда я пытаюсь перейти непосредственно к "Удивительной функции", мой HTML-код не только не отображается, но и появляется следующая ошибка консоли:

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  

Похоже, что по какой-то причине, $stateProvider.state({resolve}) неправильно разрешает мой awesomeDefaults и вводить значение в awesomeFeatureCtrl,

Вопрос:
Почему нет resolve работает как я помню что надо?

Насколько я понимаю, resolve объект берет каждый именованный индекс на нем, выполняет любую функцию на нем, а затем разрешает его в контроллере объекта в маршруте, в соответствии с документацией UI Router. Очевидно, я что-то неправильно помню или неправильно понимаю.

Answer 1

После более тщательного изучения вашей ошибки я уже сталкивался с этой проблемой. Попробуйте изменить это

resolve: {
                awesomeDefaults: () => new Controllers.AwesomeDefaults(1, 2, 3)
            }

К этому

resolve: {
                awesomeDefaults: /** ngInject */ () => new Controllers.AwesomeDefaults(1, 2, 3)
            }

Чтобы правильно внедрить awesomeDefaults.