Provider dependancy not working in Config AngularJS

Question

Provider dependancy not working in Config AngularJS

1.2k Views Asked by Shamseer At 03 April 2025 at 06:48

My code is given below. The below code shows dependancy error when executes following code. Any help would be great. Cookies dependancies also required...

Error is

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=achieverpayroll&p1…A%2F%2Flocalhost%3A8080%2Fachieverpayroll%2Fjs%2Fangular.min.js%3A17%3A381)

Code app.js

(function(){
    var app=angular.module('achieverpayroll',['ngRoute']);


    app.provider('loginChek',function(){
        this.logFn=function(){
            console.log('test');
        };
    });

    app.config(['$routeProvider', '$httpProvider','loginChekProvider', function($routeProvider, $httpProvider,loginChekProvider){

        loginChekProvider.logFn();

        $routeProvider.when('/home',{
            templateUrl: 'templates/home.html',
            controller: 'categoryController'
        }).
        otherwise({
            redirectTo: '/home'
        });
    }]);
    app.controller('categoryController', function($scope, $http) {

    });

})();

HTML:

<!DOCTYPE html>
<html ng-app="achieverpayroll">
<head>
    <meta charset="ISO-8859-1">
    <META http-equiv="X-UA-Compatible" content="IE=10">
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script src="js/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/angular-cookies.js"></script>
    <script src="js/app.js" type="text/javascript"></script>

....

Original Q&A

There are 3 best solutions below

Sunil D. On 14 June 2015 at 19:52

Try declaring your provider like this:

app.provider('loginChek',function(){

    this.$get = function(){
        return {
            logFn: function() { console.log('test') }
        };
    };

});

Eero On 14 June 2015 at 19:56

This error occurs when a module fails to load due to some exception.

Have you installed the ngRoute module?

https://code.angularjs.org/1.3.15/docs/api/ngRoute

**PSL** · Accepted Answer

Whenever you get an angular error and you could not really decode what error message means. Try to load non min version of angular and that will provide you a more descriptive error message, for example in your case you might see something like:

Uncaught Error: [$injector:modulerr] Failed to instantiate module plunker due to: Error: [$injector:pget] Provider 'loginChek' must define $get factory method.

Which is very evident that your provider does not have a service constructor associated with it. It just defines a provider function that can be accessed during the config phase which is not enough. For example:

app.provider('loginChek',function(){
      var loggedIn = false;
        //This is accessible only during the config phase before the
        //service loginCheck is even instantiated
        this.logFn=function(){
            loggedIn = true;
            console.log('test');
        };
        //When you inject loginCheck anywhere else you will get a service instance
        //with one method hasLoggedIn
        this.$get = function(){
          return {
            //You can inject services stuffs here like
            //hasLoggedIn:function($http, $q...)
            hasLoggedIn:function(){
              return loggedIn;
            }
          }
        }
    });

plnkr

Doc says:

You should use the Provider recipe only when you want to expose an API for application-wide configuration that must be made before the application starts. This is usually interesting only for reusable services whose behavior might need to vary slightly between applications.

Provider method logFn cannot really make use of any services because the services are not instantiated yet (for example you cannot inject $http service directly in a provider function, i.e .provider('loginChek',function($http){), but you can inject other providers as you need. So they are generally used only for simple configuration for your service.

Provider dependancy not working in Config AngularJS

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in CONFIG

Trending Questions

Popular # Hahtags

Popular Questions