Angular UI Router resolve throwing provider error

2019-08-09 03:43发布

问题:

I seem to be having an issue with Angular UI router and trying to add a resolve to a state. The weird thing is, that I have it in another place and it works fine.

I'm separating my code out into different component areas, my code structure is like this:

/app
  /component-dashboard
    index.js
    /controllers
      DashboardCtrl.js
  /component-chart-1
    index.js
    /controllers
      Chart1Ctrl.js

For example I have the root dashboard and this works fine:

// index.js

angular.module('az-ci')
.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
      .state('dashboard', {
        templateUrl: '/app/ci-dashboard/templates/dashboard.html',
        url: '/',
        controller: 'DashboardCtrl',
        resolve: {
          chartList: function() {
            return [{
              name: 'Chart 1',
              state: 'dashboard.chart1'
            }];
          }
        }
      });
  }
]);

// Dashboard Ctrl
angular.module('az-ci')
.controller('DashboardCtrl', [
  '$scope',
  '$rootScope',
  'chartList',
  function($scope, $rootScope, chartList) {

    $scope.chartList = chartList;

  }
]);

However in chart component, I get the following error with this (simplified) code:

// Error
Error: [$injector:unpr] Unknown provider: productListProvider <- productList

// index.js
angular.module('az-ci')
.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
      .state('dashboard.chart1', {
        templateUrl: '/app/ci-chart-1/templates/chart.html',
        url: '/chart/chart1',
        controller: 'Chart1Ctrl',
        resolve: {
          productList: ['csv', '$stateParams', function(csv, $stateParams) {
            return {};
          }]
        }
      });
  }
]);

// Chart1Ctrl
angular.module('az-ci')
.controller('Chart1Ctrl', [
  '$scope',
  '$rootScope',
  '$state',
  'productList',
  function($scope, $rootScope, $state, productList) {

    $scope.products = productList;

  }
]);

回答1:

The problem was I had defined the controller to also be used in a Directive I created to display a D3 chart. Removing the defined controller from it fixed it.