Search code examples
javascriptangularjsangular-ui-bootstrapcolor-picker

Unknown Provider | Angular Bootstrap Colorpicker


I'm encountering this error:

Error: [$injector:unpr] Unknown provider: colorpicker.moduleProvider <- colorpicker.module

using this module: Angular Bootstrap Colorpicker

and this installation:

bootstrap-colorpicker-module.js

angular.module('colorpicker.module', [])
.factory('Helper', function () {
  return {...

app.js

angular.module('myApp', [
'ngRoute',
'animations',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
'colorpicker.module']).config...

controllers.js

angular.module('myApp.controllers', [])
        .controller('Login', ['$scope', 'colorpicker.module', function($scope, colorpicker) {...

index.html

<div ng-view></div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app/js/twitter-bootstrap/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-animate.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/animations.js"></script>
    <script src='js/bootstrap-colorpicker-module.js'></script>
</body>

If I need to provide more information, I will. Thanks in advance!


Solution

  • Wild. Leaving the colorpicker out of the controller injection completely solves the issue. I suppose because it's included in the app's global module?

    Thanks everyone for your help!

    controllers.js

    angular.module('myApp.controllers', [])
        .controller('Login', ['$scope', function($scope) {...