I can't really get my head around why this markup doesn't recognize my $stateProvider?

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

Simple module:

(function () {
   'use strict';
// get modules we need for the app
angular.module('app', ['ngRoute'])
    .config(config);

config.$inject = ['$stateProvider']

function config($stateProvider) {
    console.log('works'); // actually doesn't
};

})();

I've tried various other styles eg loading them straight in the config

 .config(['$stateProvider'], function ($stateProvider) {
  // not working this way either.
  });

I can't really get my head around why this markup doesn't recognize my $stateProvider?

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

Simple module:

(function () {
   'use strict';
// get modules we need for the app
angular.module('app', ['ngRoute'])
    .config(config);

config.$inject = ['$stateProvider']

function config($stateProvider) {
    console.log('works'); // actually doesn't
};

})();

I've tried various other styles eg loading them straight in the config

 .config(['$stateProvider'], function ($stateProvider) {
  // not working this way either.
  });

• javascript
• html
• angularjs

• try .config(['$stateProvider', function ($stateProvider) {...}]) you were having ] before function in second style you mentioned – tanmay Commented Mar 8, 2017 at 13:37
• angular.module('app', ['ngRoute']) .config(['$stateProvider', function ($stateProvider) { }]); this is causing the same error. – poptard Commented Mar 8, 2017 at 13:39
• 1 Must be some other issue then. make sure you actually have $stateProvider available.. script not loaded yet or some typo in script src? – tanmay Commented Mar 8, 2017 at 13:41

1 Answer 1

You are using ngRoute in that way you have to use the $routeProvider. The $stateProvider is based on ui-router. Please check this runnable fiddle and switch to $routeProver or use ui-router in bination with $stateProvier.

ngRoute configuration

This is a runnable fiddle of ngRoute implementation.

/* App Module */
angular.module('demoApp', ['ngRoute'])
  .config(['$routeProvider', function( $routeProvider) {

     // Define routes 
     $routeProvider.when('/homepage', { 
         templateUrl: 'partial/homepage.html',
         controller: HomePageCtrl
       }).when('/users', { 
         templateUrl: 'partial/users.html',
         controller: UsersListCtrl
       }).when('/contacts',{ 
         templateUrl: 'partial/contacts.html',
         controller: ContactPageCtrl
       }).otherwise({
         redirectTo: 'homepage'
       });
   }
]);

ui-router configuration

This is a runnable fiddle of ui-route implementation.

var myApp = angular.module("myApp",["ui.router"])
  .config(function ($stateProvider, $urlRouterProvider){
      $stateProvider.state("state1", {
          url: "#",
          template: "<p>State 1</p>",
          controller: "Ctrl1"
        }).state("state2", {
          url: "#",
          template: "<p>State 2</p>",
          controller: "Ctrl2"
        });
});