AngularJS Error injector unpr Unknown Provider

Question

I m trying to build my own service by following the example in the documentation for the factory methodology   I think I ve done something wrong however because I continue to get the unknown provider error   This is my code for my app including the declaration  configuration and factory definition   EDIT  I ve now added all of the files to help troubleshoot  EDIT The full details of the error are below the issues appears to be with getSettings  as it s looking for getSettingsProvider and cannot find it  Error    injector unpr  http   errors angularjs org 1 2 16  injector unpr     p0 getSettingsProvider 20 3C- 20getSettings     at Error  native      at http   localhost sw selfservice bower components angular angular min js 6 450     at http   localhost sw selfservice bower components angular angular min js 35 431     at Object c  as get   http   localhost sw selfservice bower components angular angular min js 34 13      at http   localhost sw selfservice bower components angular angular min js 35 499     at c  http   localhost sw selfservice bower components angular angular min js 34 13      at d  http   localhost sw selfservice bower components angular angular min js 34 230      at Object instantiate  http   localhost sw selfservice bower components angular angular min js 34 394      at http   localhost sw selfservice bower components angular angular min js 66 112     at http   localhost sw selfservice bower components angular angular min js 53 14 angular js 9778  anonymous function  angular js 9778  anonymous function  angular js 7216 h  apply angular js 12512  anonymous function  angular js 1382 d angular js 3869  b c angular js 1380  b angular js 1394 Wc angular js 1307  anonymous function  angular js 21459 a angular js 2509  anonymous function  angular js 2780 q angular js 330 c     These are all of the files I have in my app currently  app JS    Initialize angular module include route dependencies  var app   angular module  selfservice     ngRoute      app config function   routeProvider        routeProvider         when                   templateUrl  partials login html              controller  login                       app factory  getSettings      http     q   function  http   q        return function  type            var q    q defer             http get  models settings json   success function  data                q resolve function                     var settings   jQuery parseJSON data                   return settings type                                        return q promise                And here is how I am using this service in my controller  controller JS  app controller  globalControl      scope   getSettings   function   scope getSettings        var loadSettings   getSettings  global        loadSettings then function val             scope settings   val                  app controller  login      scope   function   scope         return              directives js  app directive  watchResize   function        return           restrict   M           link  function scope  elem  attr                scope spacer    window innerWidth  lt  1025          large-3               scope button    window innerWidth  lt  1025          large-6               angular element window  on  resize   function                    scope  apply function                        scope spacer    window innerWidth  lt  1025          large-3                       scope button    window innerWidth  lt  1025          large-6                                                              And if it s pertinent here s the HTML   lt html class  no-js  lang  en  ng-app  selfservice  ng-controller  globalControl  gt     lt head gt       lt meta charset  utf-8    gt       lt meta name  viewport  content  width device-width  initial-scale 1 0    gt        lt title gt   settings title   lt  title gt        lt link rel  stylesheet  href  css app css    gt       lt script src  bower components modernizr modernizr js  gt  lt  script gt         lt script src  bower components angular angular min js  gt  lt  script gt          lt script src  bower components angular-route angular-route min js  gt  lt  script gt          lt script src  bower components jquery dist jquery min js  gt  lt  script gt         lt script src  js app js  gt  lt  script gt         lt script src  js controllers js  gt  lt  script gt         lt script src  js directives js  gt  lt  script gt     lt  head gt     lt body gt       lt div id  template  gt           lt header id  header  gt               lt img src    settings logo    alt    settings logoDescription     gt           lt  header gt            lt div id  view  gt               lt ng-view gt  lt  ng-view gt           lt  div gt        lt  div gt        lt script src  bower components foundation js foundation min js  gt  lt  script gt           lt script gt            initialize foundation           document  foundation          lt  script gt     lt  body gt   lt  html gt    Can someone point me in the right direction   I have done my best to follow the documentation  and looking through SO most of the related issues are much more in depth  and more difficult for me to understand   This is my first time creating a service

User · Answer

When you are using ui-router  you should not use ng-controller anywhere  Your controllers are automatically instantiated for a ui-view when their appropriate states are activated

User · Answer

In my case  I added a new service  file  to my app  That new service is injected in an existing controller   I did not miss new service dependency injection into that existing controller and did not declare my app module no more than one place  The same exception is thrown when I re-run my web app and my browser cache is not reset with a new service file codes  I simply refreshed my browser to get that new service file for browser cache  and the problem was gone

User · Answer

Since this is the first Stackoverflow question that appears on Google when searching for Error   injector unpr Unknown Provider I ll add this here   Make sure that in your index html any modules dependencies are not being loaded after they are needed   For example in my code customFactory factory js begins like this   angular     module  app module1       factory  customFactory   customFactory     However the index html looked like this        lt script src   src client app customFactory factory js  gt  lt  script gt       lt script src   src client app module1 module js  gt  lt  script gt    Where it should ve really looked like this        lt script src   src client app module1 module js  gt  lt  script gt       lt script src   src client app customFactory factory js  gt  lt  script gt    Since customFactory factory js is declared as part of module1  it needs to be loaded before customFactory

User · Answer

This error is also appears when one accidntally injects  scope into theirs factory   angular module  m            factory  util   function   scope        lt -- this   scope  gives  Unknown provider  when one attempts to inject  util

User · Answer

I was getting this problem and it turned out I had included my controller both in ui router and in the html template  as in    config    stateProvider     function  stateProvider         stateProvider state  dashboard           url    dashboard         templateUrl   dashboard views index html         controller   DashboardController                    and    lt section data-ng-controller  DashboardController  gt

User · Answer

Spent a few hours trying to solve the same  This is how I did it   app js   var myApp   angular module   myApp     ngRoute    ngResource    CustomServices        CustomServices is a new module I created and placed in a separate file called services js   Layout cshtml    lt script src    Scripts app js  gt  lt  script gt   lt script src    Scripts services services js  gt  lt  script gt    services js   var app   angular module  CustomServices         app factory   GetPeopleList      http     log    q   function    http   log   q           Your code here     app js  myApp controller   mainController      scope     http     route     routeParams     location    GetPeopleList   function    scope   http   route   routeParams   location  GetPeopleList     You have to bind your service to your new module in the services js file AND of course you have to use that new module in the creation of your main app module  app js  AND also declare the use of the service in the controller you want to use it in

User · Answer

also one of the popular reasons maybe you miss to include the service file in your page    lt script src  myservice js  gt  lt  script gt

User · Answer

Please  include  both Controller and the module s  where the controller and the functions called in the Controller are   module theModule

User · Answer

app factory  getSettings      http    q    here      function  http   q      you need to declare ALL your dependencies OR none and you forgot to declare  q     edit   controller js   login  dont return

User · Answer

Your angular module needs to be initialized properly  The global object app needs to be defined and initialized correctly to inject the service   Please see below sample code for reference   app js  var app   angular module  SampleApp    ngRoute       You can inject the dependencies within the square bracket      app config    routeProvider     locationProvider   function  routeProvider   locationProvider       routeProvider      when              templateUrl  partials login html         controller  login              locationProvider      html5Mode true         app factory  getSettings      http     q   function  http   q      return         Code edited to create a function as when you require service it returns object by default so you can t return function directly  That s what understand        getSetting  function  type           var q    q defer           http get  models settings json   success function  data            q resolve function               var settings   jQuery parseJSON data             return settings type                               return q promise                  app controller  globalControl      scope   getSettings   function   scope getSettings        Modified the function call for updated service   var loadSettings   getSettings getSetting  global      loadSettings then function val         scope settings   val               Sample HTML code should be like this    lt  DOCTYPE html gt   lt html gt       lt head lang  en  gt           lt title gt Sample Application lt  title gt       lt  head gt       lt body ng-app  SampleApp  ng-controller  globalControl  gt           lt div gt              Your UI elements go here          lt  div gt           lt script src  app js  gt  lt  script gt       lt  body gt   lt  html gt    Please note that the controller is not binding to an HTML tag but to the body tag  Also  please try to include your custom scripts at end of the HTML page as this is a standard practice to follow for performance reasons   I hope this will solve your basic injection issue

User · Answer

I got this error writing a Jasmine unit test  I had the line  angular injector   myModule     It needed to be  angular injector   ng    myModule

User · Answer

Be sure that you load controller outsideapp config  The following code may cause this error   app config    stateProvider     urlRouterProvider   function   stateProvider   urlRouterProvider           var AuthCtrl   require  components auth AuthCtrl      NOTICE HERE         stateProvider state  login                url    users login               templateUrl  require  components auth login tpl html                controller  AuthCtrl    ERROR                  To fix this error  we must move AuthCtrl to outsideapp config   var AuthCtrl   require  components auth AuthCtrl      NOTICE HERE app config    stateProvider     urlRouterProvider   function   stateProvider   urlRouterProvider            stateProvider state  login                url    users login               templateUrl  require  components auth login tpl html                controller  AuthCtrl    WORK

User · Answer

user2310334 I just tried this  a VERY basic example   HTML file   lt  DOCTYPE html gt   lt html lang  en  ng-app  app  gt    lt head gt       lt script src  https   cdnjs cloudflare com ajax libs angular js 1 4 6 angular min js  type  text javascript  gt  lt  script gt       lt script src  https   cdnjs cloudflare com ajax libs angular js 1 4 6 angular-route min js  type  text javascript  gt  lt  script gt       lt script src    app js  type  text javascript  gt  lt  script gt   lt  head gt    lt body gt       lt div ng-controller  MailDetailCtrl  gt       lt  div gt   lt  body gt   lt  html gt    The javascript file   var myApp  angular module  app     ngRoute      myApp factory  mailService    function      return       getData   function          var employees     name   John Doe   id   1             name   Mary Homes   id   2             name   Chris Karl   id   3                   return employees                    myApp controller  MailDetailCtrl     scope    mailService   function  scope  mailService      alert mailService getData   0  name          And it works  Try it

[javascript] AngularJS Error: $injector:unpr Unknown Provider

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-service