title: Angular 1.5 components with ui-router resolve : Unknown provider
body: <p>I'm facing an issue with converting controllers to components preparing my application for Angular 2, but the problem the migration is not going well, I have the ui-router to route between states and using resolve in a few controllers, the version with controller is working but the version of components now working at all, I followed a lot of guides and seems I'm doing good for code but its not working for me.</p>
  
  <p>I have the following <strong>module</strong> with <strong>controller</strong>:</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('app.sample', [])
      .config(config);
  
    /** @ngInject */
    $stateProvider
      .state('app.sample', {
        url    : '/sample',
        views  : {
          'content@app': {
            templateUrl: 'app/main/sample/sample.html',
              controller : 'SampleController as vm'
            }
          },
          resolve: {
            SampleData: function (myService) {
              return myService.getSample(); // I return a promise here
            }
         }
       });
    }
  })();
  </code></pre>
  
  <p><strong>Controller</strong>: </p>
  
  <pre><code>(function ()
  {
      'use strict';
      angular
          .module('app.sample')
          .controller('SampleController', SampleController);
  
      /** @ngInject */
      function SampleController(SampleData)
      {
          var vm = this;
          vm.helloText = SampleData.data.helloText;
      }
  })();
  </code></pre>
  
  <p>The above code working well, BUT After making it as a <strong>component</strong> its become like this: </p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('app.sample', [])
      .config(config);
  
    /** @ngInject */
    function config($stateProvider) {
      // State
      $stateProvider
        .state('app.sample', {
          url: '/sample',
          views: {
            'content@app': {
              template: '&lt;sample&gt;&lt;/sample&gt;'
            }
          },
          resolve: {
            SampleData: function (myService) {
              return myService.getSample(); // I return a promise here
            }
          }
        });
    }
  })();
  </code></pre>
  
  <p><strong>Component</strong>: </p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('app.sample')
      .component('sample', {
        templateUrl: 'app/main/sample/sample.html',
        bindings: {
        },
        controller: Sample
      });
  
    /** @ngInject */
    function Sample(SampleData) {
      var $ctrl = this;
      $ctrl.helloText = SampleData.data.helloText;
    }
  })();
  </code></pre>
  
  <p>But now its not working and gives me the following error: </p>
  
  <pre><code>Error: [$injector:unpr] Unknown provider: SampleDataProvider &lt;- SampleData
  http://errors.angularjs.org/1.5.7/$injector/unpr?p0=SampleDataProvider%20%3C-%20SampleData
      at angular.js:68
      at angular.js:4502
      at Object.getService [as get] (angular.js:4655)
      at angular.js:4507
      at getService (angular.js:4655)
      at injectionArgs (angular.js:4679)
      at Object.invoke (angular.js:4701)
      at $controllerInit (angular.js:10234)
      at nodeLinkFn (angular.js:9147)
      at angular.js:9553
  </code></pre>
  
  <p>My dependencies inside <strong>bower.json</strong>:</p>
  
  <pre><code>"dependencies": {
      "angular": "1.5.7",
      "angular-animate": "1.5.7",
      "angular-aria": "1.5.7",
      "angular-cookies": "1.5.7",
      "angular-material": "1.1.0-rc.5",
      "angular-messages": "1.5.7",
      "angular-resource": "1.5.7",
      "angular-sanitize": "1.5.7",
      "angular-ui-router": "1.0.0-beta.1",
      "jquery": "2.2.4",
      "mobile-detect": "1.3.2",
      "moment": "2.13.0"
    }
  </code></pre>
  
  <p>Any idea what the problem, what I'm missing?</p>