CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsangular-ui-router
Subhanu Sharma
Subhanu Sharma

Reputation: 37

Uncaught Error injector modulerr Module Error

Uncaught Error injector modulerr Module Error. Angular router not working properly. After adding $stateProvider in app.config the angulerjs stop working by giving following error.

Failed to instantiate module app due to: Error: [$injector:unpr] http://errors.angularjs.org/1.6.9/$injector/unpr?p0=%24st... at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:7:76 at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:46:64 at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:43:309) at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:44:39) at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:44:124) at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:42:279) at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:42:418 at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:8:7) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:42:180) at gb (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js:46:250

Was also giving error Error: $injector:unpr Unknown Provider Stateprovider after some changes which i didn't remember.

Script

` angular.module('app', []) 'use strict';

   var app = angular.module('app').factory('AuthInterceptor', [function () {
        return {
            // Send the Authorization header with each request
            'request': function (config) {
                config.headers = config.headers || {};
                var encodedString = btoa("admin:admin");
                config.headers.Authorization = 'Basic ' + encodedString;
                return config;
            }
        };
    }]);


    app.config(['$httpProvider', '$stateProvider',function ($httpProvider, $stateProvider ) {
  $stateProvider
    .state('GradesData', {
      url: '/GradesData',
      templateUrl: '../GradesData.html'
    })
    .state('GradesForm', {
      url: '/GradesForm',
      templateUrl: '../GradesForm.html'
    })

  $httpProvider.interceptors.push('AuthInterceptor');

}]);`

included the following script

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

Problem Started after adding $stateProvider Added $stateProvider for passing data/values from on angularjs page another angularjs page.

other jquery script included

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="dist/js/adminlte.min.js"></script>
<script src="dist/js/demo.js"></script>

Upvotes: 0

Views: 2559

Answers (1)

BartoszTermena
BartoszTermena

Reputation: 1487

If you are using <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> use $routeProvider instead of $stateProvider

Then you're code will looks like that :

app.config(['$locationProvider', '$routeProvider',
      function($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('');
         $routeProvider
.when('/GradesData', {
         templateUrl: '../GradesData.html'})
.when('/GradesForm', {
         templateUrl: '../GradesForm.html'
            });
            $routeProvider.otherwise('/');
        }
    ]);

Add ngRoute to angular.module 

angular.module('app', ['ngRoute'])

https://www.w3schools.com/angular/angular_routing.asp

For $stateProvider add ui.router to angular.module 

angular.module('helloworld', ['ui.router']);

and use 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.min.js"></script>

look up here: https://ui-router.github.io/ng1/tutorial/helloworld

Upvotes: 0

Related Questions