angularjs ui-router: Unknown provider: $stateProvider

Question

I'm having troubles using the ui-router plugin of AngularJS:

angular.module('myApp', []).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {  
    $stateProvider
        .state('mandats', {
            url: '/domiciliations/mandats',
            templateUrl: 'domiciliations/views/mandats.html',
            controller: 'mandatsCtrl'
        });
}])

I then get this error at startup:

Unknown provider: $stateProvider

I've included the javascripts in this order:

<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>

What could be the issue ?

[EDIT]

I've got rid of the error message by adding 'ui.compat' as a dependency of myApp. I saw that in the sample code of ui-router but nowhere in the documentation. What is this about ?

Nevertheless, it still does not work. I've added ui-view to a div in the application index file. But the page remains blank.

Can you please list what version of Angular you are running? — Manuel Hernandez
– Manuel Hernandez, Commented Jul 8, 2015 at 14:13

Mihai H · Accepted Answer · 2013-05-03 14:21:56Z

15

The following piece of code should do the job. At least in my case, so let me know if it works or not.

angular.module('myApp', ['ui.compat']).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {  
    $stateProvider
        .state('mandats', {
            url: '/domiciliations/mandats',
            templateUrl: 'domiciliations/views/mandats.html',
            controller: 'mandatsCtrl'
        });
}])

Now about your issue with the page being empty. For sure the URL you have in the browser is not matched with any defined in your state. Try this '#/domiciliations/mandats' in your browser and see if the view gets rendered appropriately. Not that you absolute url should be something similar with http://[HOST_NAME]/home.html#/domiciliations/mandats.

answered May 3, 2013 at 14:21

Mihai H

3,2914 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sam Over a year ago

like I said in my previous reply, that's what I ended up doing. I'll mark your reply as answer though ;) Thanks.

Manuel Hernandez Over a year ago

I tried this and angular could not fin 'ui-compat'; error below Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module ui.compat due to: Error: [$injector:nomod] Module 'ui.compat' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Vitalii Ivanov · Accepted Answer · 2017-03-01 08:08:45Z

15

You just need to include ui-router module as dependency.

like following

angular
    .module('myApp', ["ui.router"])
    .config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) { 
        ...
    }]);

edited Mar 1, 2017 at 8:08

answered Apr 15, 2016 at 10:32

Vitalii Ivanov

3,2702 gold badges36 silver badges47 bronze badges

1 Comment

Greg Wiley Over a year ago

Where are you closing your array in .config?

Koni · Accepted Answer · 2013-08-27 08:10:47Z

3

Including the angular-ui v0.0.2 will fix the problem.

answered Aug 27, 2013 at 8:10

Koni

412 bronze badges

Collectives™ on Stack Overflow

angularjs ui-router: Unknown provider: $stateProvider

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related