Having difficulty with integrating a resolve into a state using Angular UI router. Strangely, it works perfectly fine in another section of my code.
I've organized my code into different component areas structured like this:
/app
/component-dashboard
index.js
/controllers
DashboardCtrl.js
/component-chart-1
index.js
/controllers
Chart1Ctrl.js
For instance, the root dashboard functions properly:
// 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, when trying to implement a resolve in the chart component, I encounter the following error with the given (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;
}
]);