Angular error: Error: [$injector:unpr] Unknown provider: $stateProvider

Question

I've read through the other related threads on the subject and tried their recommended solutions but I can't figure it out. As far as I can tell, ngRoute is being correctly linked to the project via the tag and then injected as a dependency. I've tried many different things (like using ui-router instead) and nothing seems to be working. Any help would be much appreciated!

The full error reads:

    Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
    at REGEX_STRING_REGEXP (http://localhost:8000/static/bower_components/angular/angular.js:68:12)
    at http://localhost:8000/static/bower_components/angular/angular.js:4284:19
    at getService (http://localhost:8000/static/bower_components/angular/angular.js:4432:39)
    at Object.invoke (http://localhost:8000/static/bower_components/angular/angular.js:4464:13)
    at runInvokeQueue (http://localhost:8000/static/bower_components/angular/angular.js:4379:35)
    at http://localhost:8000/static/bower_components/angular/angular.js:4388:11
    at forEach (http://localhost:8000/static/bower_components/angular/angular.js:336:20)
    at loadModules (http://localhost:8000/static/bower_components/angular/angular.js:4369:5)
    at createInjector (http://localhost:8000/static/bower_components/angular/angular.js:4294:11)
    at doBootstrap (http://localhost:8000/static/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=myApp&p1=Error%3A%2…host%3A8000%2Fstatic%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body ng-app="myApp">

    <div ng-controller="MainCtrl">
        {{ test }}
    </div>

    <script src="static/bower_components/angular/angular.js"></script>
    <script src="static/bower_components/angular-route/angular-route.min.js"></script>
    <script src="static/components/app.js"></script>
</body>
</html>

app.js:

'use strict';

function() {
    angular.module('myApp', ['ngRoute'])
        .controller('MainCtrl', function ($scope) {
            $scope.test = 'hello world';
        });
})();

score 1 · Answer 1 · answered Nov 27 '15 at 08:40

It's not a routing problem. You have missing parenthesis in your app.js, your code should be like this.

'use strict';

(function () {
    angular.module('myApp', ['ngRoute'])
        .controller('MainCtrl', function ($scope) {
            $scope.test = 'hello world';
        });
})();

score 0 · Answer 2 · edited May 23 '17 at 12:23

I think that ngRoute (angular-route.js) uses the provider $routeProvider, and ui-router (angular-ui-router.js) uses the provider $stateProvider.

Check out this answer. What is the difference between angular-route and angular-ui-router?

If this is the case. Solution 1. change the script from angular-route.js to angular-ui-router.js Solution 2. change the provider to $routeProvider

Hope it helps

score 0 · Answer 3 · answered Feb 21 '16 at 07:41

If all the above answers fail, Just try this one.

I think the problem is with the included script...

Solution 1: Copy the angular.min.js as well as angular-route.min.js to the current folder and include it as

<script src="angular.min.js"></script>

If it doesn't work,

Solution 2: Try adding the above script, on your head tag just after the end of the title tag.

Angular error: Error: [$injector:unpr] Unknown provider: $stateProvider

3 Answers3