Angular 1.5 components with ui-router resolve : Unknown provider

Finally solved it, I misunderstood that how the components are working.

First I change SampleData to sampleData, Pascal Case but with first letter small.

Then inside the module i changed the template to template: '<sample sample-data="$resolve.sampleData"></sample>'

and resolve to :

resolve: {  sampleData: function (msApi) {    return msApi.resolve('sample@get');  }}

And for component I changed the binding as well:

bindings: {  sampleData: '='},

And inside the controller of component I removed SampleData from signature and called it like this $ctrl.helloText = $ctrl.sampleData.data.helloText;.

So the final code now is like : For Module:

 (function () {  'use strict';  angular    .module('app.sample', [])    .config(config);  /** @ngInject */  function config($stateProvider) {    // State    $stateProvider      .state('app.sample', {        url: '/sample',        views: {          'content@app': {            template: '<sample sample-data="$resolve.sampleData"></sample>'          }        },        resolve: {          sampleData: function (myService) {            return myService.getSample(); // I return a promise here          }        }      });  }})();

And component like this:

(function () {  'use strict';  angular    .module('app.sample')    .component('sample', {      templateUrl: 'app/main/sample/sample.html',      bindings: {        sampleData: '='      },      controller: Sample    });  /** @ngInject */  function Sample() {    var $ctrl = this;    $ctrl.helloText = $ctrl.sampleData.data.helloText;  }})();

And finally worked.

Edit:P.S.: Outside the question and answer scope, If you use component without state too, you need to get the data inside controller instead of resolve, so you can call components wherever you want.

'use strict';angular    .module('app.sample')    .controller('SampleController', SampleController);/** @ngInject */function SampleController(SampleData){    var vm = this;    vm.helloText = SampleData.data.helloText;}

Instead of giving like above, try injecting 'SampleData' resolve in your controller, like below:

'use strict';angular    .module('app.sample')    .controller('SampleController', ['SampleData', SampleController]);/** @ngInject */function SampleController(SampleData){    var vm = this;    vm.helloText = SampleData.data.helloText;}

Hope that works for you