AngularJs injection error

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

There is no single injection in the code you posted, and no error message either. — JB Nizet
– JB Nizet, Commented Apr 10, 2016 at 7:21
You're confusing "injecting a component into another component (for example, a service $state into a controller MainCtrl), and "declaring module dependencies" (for example, .module('inspinia', ['angularCharts'])defines a new module 'inspinia' which has a dependency on the module 'angularCharts'). The latter simply means that when the 'inspinia' module is loaded, all itscomponents and all the components of 'angularCharts' ara available in the application or test. — JB Nizet
– JB Nizet, Commented Apr 10, 2016 at 7:32
Pro tip: There's a URL in the error message that gives you more information about the error. — reduckted
– reduckted, Commented Apr 10, 2016 at 7:33
Regarding your error: it would be much clearer if you didn't use the minified version of angular, which should be used in producion, but not in development. And it says that MainCtrl needs a service named $state, which is not available. You have forgotten to make your module depend on the ui-router module. — JB Nizet
– JB Nizet, Commented Apr 10, 2016 at 7:34

JB Nizet · Accepted Answer · 2016-04-10 08:16:57Z

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(...);

answered Apr 10, 2016 at 8:16

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs injection error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related