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