Angularjs error Unknown provider

101,030

Solution 1

Make sure you are loading those modules (myApp.services and myApp.directives) as dependencies of your main app module, like this:

angular.module('myApp', ['myApp.directives', 'myApp.services']);

plunker: http://plnkr.co/edit/wxuFx6qOMfbuwPq1HqeM?p=preview

Solution 2

bmleite has the correct answer about including the module.

If that is correct in your situation, you should also ensure that you are not redefining the modules in multiple files.

Remember:

angular.module('ModuleName', [])   // creates a module.

angular.module('ModuleName')       // gets you a pre-existing module.

So if you are extending a existing module, remember not to overwrite when trying to fetch it.

Share:
101,030
agasthyan
Author by

agasthyan

Updated on June 23, 2020

Comments

  • agasthyan
    agasthyan about 4 years

    I'm trying to display the configured values author and version in angular value service in html page.Version code is displayed fine but not the author name Here is the html code

        <!doctype html>
    <html lang="en" ng-app="myApp">
    <head>
      <meta charset="utf-8">
      <title>My AngularJS App</title>
      <link rel="stylesheet" href="css/app.css"/>
    </head>
    <body>
      <ul class="menu">
        <li><a href="#/view1">view1</a></li>
        <li><a href="#/view2">view2</a></li>
      </ul>
    
      <div ng-view></div>
    
      <div>Angular seed app: v<span app-version></span></div>
      <div>Author is : <span app-author></span></div>
    
    
      <script src="lib/angular/angular.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>
    </body>
    </html>
    

    Here is the directive...

    angular.module('myApp.directives', []).
      directive('appVersion', ['version', function(version) {
        return function(scope, elm, attrs) {
          elm.text(version);
        };
      }])
      .directive('appAuthor', ['author', function(author) {
        return function(scope, elm, attrs){
            elm.text(author);
        };
      }]);
    

    And here is the service portion where author and version values are configured

        angular.module('myApp.services', []).
      value('version', '0.1')
      .value('author','JIM');
    

    The error i'm getting in developer console is

    Error: Unknown provider: authorProvider <- author <- appAuthorDirective
    
  • agasthyan
    agasthyan over 11 years
    Well i'm loading those modules.but if dats the problem then how could version number get displayed and author not
  • bmleite
    bmleite over 11 years
    Can you provide a plunker or jsfiddle with a replica of the problem? It could be a typo or some kind of collision on service names. (As you can see, on the one I've provided it is working correctly)
  • agasthyan
    agasthyan over 11 years
    well i think u were i was missing to load some modules.Thanks dat helped :)
  • Kreychek
    Kreychek about 10 years
    I had no idea that was the case. I was defining a variable and setting it equal to angular.module(...) after the angular-seed default ctrls, and was getting this same problem. Saved me much hair.
  • Dr1Ku
    Dr1Ku over 9 years
    Excellent hint to search for "angular.module('..', " in a codebase to see where the module/'app' is created, thanks!
  • ATrubka
    ATrubka over 8 years
    Wow! This is genius!