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: ``` ``` 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.

Accepted Answer

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.

angularjs ui-router: Unknown provider: $stateProvider

Solution

Problem