ui-router Dependency included still getting the error[$injector:unpr] Unknown provider: $stateProvider

Question

I am actually trying to use $stateProvider routing but it gives the error; Uncaught Error: [$injector:modulerr] Failed to instantiate module moduleTry due to: Error: [$injector:unpr] Unknown provider: $stateProvider

The angular-ui-router.js is included after the angular.js file in my index page. I have included the ui-router dependency in my app.js file also. I could not get the answer even after a lot of research. Please help

Index.htmI

<!DOCTYPE html>
<head>


  <script src="app/vendors/angular-1.4.8/angular.js"></script>
  <script src="app/vendors/angular-1.4.8/angular-ui-router.js"></script>
  <script src="app/vendors/angular-locale_en-in.js"></script>
  <script src="app/assets/css/styles.css"></script>
  <script src="app/scripts/try.app.js"></script>
  <script src="app/scripts/try.config.js"></script>
  <script src="app/scripts/try.controller.js"></script>
  <script src="app/scripts/try.router.js"></script> 


</head>

<body ng-app="moduleTry">
  <h2>AngularJS Ui router - Demonstration</h2>

  <div class="container">
      <a href="#home"></a>Home</li>
      <a href="#about-us"></a>About</li>
  </div>

      <div ui-view>

      </div>
  </div>

</body>

</html>

try.app.js

(function(){

    angular.module('moduleTry',[
    'ui.router'
    ])

})();

try.config.js

(function(){
    "use-strict"


})();

try.controller.js

(function(){ "use-strict";

angular.module("moduleTry",)

.controller('tryController',['$scope',function($scope){
     $scope.name ="Karan";
    }]);
})();

try.route.js

"use-strict";

        angular.module('moduleTry')
             .config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider){
                $urlRouterProvider.otherwise("/home");

            $stateProvider
                .state("home",{
                    url: "/home",
                    templateUrl: "Template/template1.html"
                })
                .state("about-us", {
                    url: "/about-us",
                    templateUrl: "Template/template2.html"
                })
             }]);

Error image

Try injecting $state into the try.route.js config then, see if it resolves your issue. — rrd
i tried to include the $state to try.route.js but the issue remained the same. — Karan Bahuguna

Radim Köhler Radim Köhler · Accepted Answer · 2017-01-20T08:08:48

That error would appear, if you would firstly do correct setter init

(function(){

    angular.module('moduleTry',[
    'ui.router'
    ])

})();

And then.. accidentally - redefine it

angular.module('moduleTry',[])

And if you check your controller code, there is a type very close to it

angular.module("moduleTry",)

that is wrong, it must be

angular.module("moduleTry")

ui-router Dependency included still getting the error[$injector:unpr] Unknown provider: $stateProvider

1 Answers