AngularJs injection error - angularjs

Question

function MainCtrl($scope, $http, $interval, $state, $location)
{
}
angular
.module('inspinia', ['angularCharts'])
.controller('MainCtrl', MainCtrl)
No matter what I try to inject, I get an error. Instructions are not very clear. For instance, should I be pulling in the script which has the injection before or after Angur itself? Etc, etc
Is there anything obviouslty wrong with that code above?
IMPORTANT this is an exisitng, fuctcioning app. As pointed out in the comments, the error seems clear, BUT it only occurs when I add , ['angularCharts']. Before that, the coude is working just fine, routing, state chanegs and all.
I suspect that the erorr message is a red herring. The problem obvoulsy stems from adding , ['angularCharts'] - but why?
Error: [$injector:unpr] Unknown provider: $stateProvider <- $state <- MainCtrl
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20MainCtrl
at angular.js:68
at angular.js:4397
at Object.getService [as get] (angular.js:4550)
at angular.js:4402
at getService (angular.js:4550)
at injectionArgs (angular.js:4574)
at Object.invoke (angular.js:4596)
at extend.instance (angular.js:9855)
at nodeLinkFn (angular.js:8927)
at compositeLinkFn (angular.js:8226)(anonymous function) # angular.js:13236(anonymous function) # angular.js:9965Scope.$apply # angular.js:16925bootstrapApply # angular.js:1694invoke # angular.js:4604doBootstrap # angular.js:1692bootstrap # angular.js:1712angularInit # angular.js:1606(anonymous function) # angular.js:30423j # jquery-2.1.1.min.js:2k.fireWith # jquery-2.1.1.min.js:2n.extend.ready # jquery-2.1.1.min.js:2I # jquery-2.1.1.min.js:2
[Update] I am basing the app on a framework. I don't know how good it is, but it does work (state change and all).
INdex.html has <script src="js/app.js"></script>
which file contains the following. Maybe I should be adding ['angularCharts'] there? In fact, is it wrong of me to have that .module line at the end of my controller?
(function () {
angular.module('inspinia', [
'ui.router', // Routing
'oc.lazyLoad', // ocLazyLoad
'ui.bootstrap', // Ui Bootstrap
])
})();

Answer 1

The problem is that you're redefining the main module of your application when doing
angular.module('inspinia', ['angularCharts'])
So the module loses all its components previously added, and all its dependencies (ui-router, etc.).
Instead, you must modify the axisting definition of the module to add a dependency on angularCharts, and, in your controller, simply retrieve the previously defined module:
angular.module('inspinia').controller(...);