Unknown provider: $state

Question

Hello i'm having some issues with dependency injection via the $injector service.
I'm new to angular so i'll explain how i see this from an IoC container point of view.

First off the issue : $injector is unable to resolve $state.

core.js

(function() {
    'use strict';
     angular.module('app.core',['ui.router'])
         .config(function($stateProvider,$state){
           // ......
     });
}());

Here is the error :

  Uncaught Error: [$injector:modulerr] Failed to instantiate module app due      to:
  Error: [$injector:modulerr] Failed to instantiate module app.core due to:
  Error: [$injector:unpr] Unknown provider: $state

I don't think the stack trace has much relevance here... but just in case i posted it at the bottom of the question:

Index.html : I just wanted to show where and in what order i reference my .js files.

    <head>
    ....  <!-- pointing out that my .js are not here --> 
    </head>
    <body>

        <script src="bower_components/jquery/dist/jquery.js"></script>
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

        <script src="components/core/lib/core.js"></script>
        **<!-- relevant to the EDIT part below -->
        <script src="components/something/something.js"></script>** 
    </body>

As i understand angular's provider recipe :

$stateProvider is the service provider which registers $state service to the IoC($injector) and does so by exposing $get member which the IoC knows to treat in a special way.

if '$stateProvider' was created and can be inject by itself how come it did not register '$state' service to the IoC

EDIT : further more i have another module later on which has no issue receiving the $state service as a dependency.

something.js

   (function() {
     'use strict';
      angular.module('app.something',['ui.router'])  
           .config(function($stateProvider, $urlRouterProvider,$state) {
             .... no problem receiving '$state' here
       })       
 }());

EDIT 2 : My bad it does not work in any config VISHAL DAGA was right.

The stack trace :

  http://errors.angularjs.org/1.4.8/$injector/unpr?p0=%24state
  at http://localhost:9000/bower_components/angular/angular.js:68:12
  at http://localhost:9000/bower_components/angular/angular.js:4334:19
  at getService      (http://localhost:9000/bower_components/angular/angular.js:4482:39)
  at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4514:13)
  at runInvokeQueue (http://localhost:9000/bower_components/angular/angular.js:4429:35)
  at http://localhost:9000/bower_components/angular/angular.js:4438:11
    at forEach     (http://localhost:9000/bower_components/angular/angular.js:340:20)
    at loadModules   (http://localhost:9000/bower_components/angular/angular.js:4419:5)
    at http://localhost:9000/bower_components/angular/angular.js:4436:40
    at forEach      (http://localhost:9000/bower_components/angular/angular.js:340:20)
 http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=app.core&p1=Error%3…    2F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A340%3A20)
    at http://localhost:9000/bower_components/angular/angular.js:68:12
    at http://localhost:9000/bower_components/angular/angular.js:4458:15
    at forEach   (http://localhost:9000/bower_components/angular/angular.js:340:20)
      at loadModules   (http://localhost:9000/bower_components/angular/angular.js:4419:5)
    at http://localhost:9000/bower_components/angular/angular.js:4436:40
    at forEach   (http://localhost:9000/bower_components/angular/angular.js:340:20)
    at loadModules   (http://localhost:9000/bower_components/angular/angular.js:4419:5)
      at createInjector   (http://localhost:9000/bower_components/angular/angular.js:4344:11)
      at doBootstrap   (http://localhost:9000/bower_components/angular/angular.js:1676:20)
      at bootstrap   (http://localhost:9000/bower_components/angular/angular.js:1697:12)
   http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=app&p1=Error%3A%20%…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1697%3A12)

as per angular's documentation, either $state is not defined or not spelled correctly. see this if it helps - https://docs.angularjs.org/error/$injector/unpr — Manoj Salvi, Nov 28 '15 at 10:42

score 6 · Accepted Answer · answered Nov 28 '15 at 10:41

6

At config stage, its all provider, so injecting $stateProvider is correct but not $state.

Remove $state and the problem will go away.

answered Nov 28 '15 at 10:41

VISHAL DAGA

4,132
10
47
53

i know that's kinda the all issue. i had another module with a config stage later on which had no problem receiving $state as a dependency – eran otzap Nov 28 '15 at 10:43
see the EDIT part of my question – eran otzap Nov 28 '15 at 10:50
angular.config only accepts Providers, $state is instance of $stateProvider. – VISHAL DAGA Nov 28 '15 at 10:50
i made a mistake it was injected into a controller later on in 'something' module. thanks for your help. – eran otzap Nov 28 '15 at 10:56
is the service exposed via $get a singleton ? I thought it is but i tried attaching a kind of unique id mechanism to it. and got different results. the mechanism : http://stackoverflow.com/questions/1997661/unique-object-identifier-in-javascript/1997828?sgp=2#1997828 – eran otzap Nov 28 '15 at 12:25
yes, services are singleton. $get is called by injector to create a single instance. – VISHAL DAGA Nov 28 '15 at 15:54

score 0 · Answer 2 · answered Nov 28 '15 at 10:45

I think you are mixing $state with $stateProvider.state. See below for correct use

(function() {
    'use strict';
     angular.module('app.core',['ui.router'])
         .config(function($stateProvider){
           $stateProvider
            .state('default', {....
     });
}());

Unknown provider: $state

2 Answers2