Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: [$injector:unpr] Unknown provider: chart.jsProvider

I am trying to use this plugin https://github.com/jtblin/angular-chart.js. And I am getting this error (I don't think the problem is with the plugin instead it's in the way I'm doing the injection!!):

Error: [$injector:unpr] Unknown provider: chart.jsProvider <- chart.js <- WhateverCtrl
http://errors.angularjs.org/1.3.20/$injector/unpr?p0=chart.jsProvider%20%3C-hart.js%20%3C-%20WhateverCtrl
    at http://mega.app/scripts/vendor.js:9895:12
    at http://mega.app/scripts/vendor.js:13863:19
    at Object.getService [as get] (http://mega.app/scripts/vendor.js:14010:39)
    at http://mega.app/scripts/vendor.js:13868:45
    at getService (http://mega.app/scripts/vendor.js:14010:39)
    at invoke (http://mega.app/scripts/vendor.js:14042:13)
    at Object.instantiate (http://mega.app/scripts/vendor.js:14059:27)
    at http://mega.app/scripts/vendor.js:18356:28
    at http://mega.app/scripts/vendor.js:44696:28
    at invokeLinkFn (http://mega.app/scripts/vendor.js:18113:9)

when I inject chart.js globally like below, I don't get any error. (keep reading)

angular.module('my-app', [
            'chart.js'      // <<<<<
            'ui.router',            
            'ngStorage',
            // ...
        ]);

})();

But from my understanding, it's recommended to inject this module only in the controllers that uses it, thus when I try to inject it in a controller like below, I get the error above.

angular
    .module('my-app')
    .controller('WhateverCtrl', ctrl);

ctrl.$inject = ['chart.js'];     // <<<<<

function ctrl() {
    var vm = this;

// ...

However if I remove the $ from the injection line to ctrl.inject = ['chart.js']; I do get rid of the error, but chart.js wont work, because I guess I must pass it to the function function ctrl() { like this function ctrl(chart.js) { which of course causes an error due to the ..

like image 597
Mahmoud Zalt Avatar asked Jan 01 '26 05:01

Mahmoud Zalt


1 Answers

Since angular-chart.js is itself a module, it must be injected into the module and cannot be injected into the controller.

like image 183
JGOakley Avatar answered Jan 04 '26 13:01

JGOakley



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!