Provider dependancy not working in Config AngularJS

Question

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>

....

I think your problem is with the `provider` declaration. If you look at the [docs](https://docs.angularjs.org/guide/providers), it says providers must implement a `$get()` method. — Sunil D., Jun 14 '15 at 19:44
Please [check ngRoute inclusion][1]. Also look at comments at accepted answer. [1]: http://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr — kaaposc, Jun 14 '15 at 19:57
Sunil D you are right. I am new to AngularJS and missed it. Thank you for your note.. — Shamseer, Jun 14 '15 at 22:30

PSL · Accepted Answer · 2015-06-14T20:55:02.767

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.

Thank you so much PSL. This one worked for me. SSO login is used for the proposed app, so thought to implement some global login check to redirect if cookie not set. — Shamseer, Jun 14 '15 at 22:31
I am using .run instead of .config for login check, but the information is very useful... — Shamseer, Jun 14 '15 at 23:08

score 0 · Answer 2 · answered Jun 14 '15 at 19:52

0

Try declaring your provider like this:

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

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

});

answered Jun 14 '15 at 19:52

Sunil D.

17,983
6
53
65

score 0 · Answer 3 · answered Jun 14 '15 at 19:56

0

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

answered Jun 14 '15 at 19:56

Eero

4,704
4
37
40

1

Yes I did ngRoute installation. You will find it in my HTML code.Thanks for your response. The issue is actually due to .get was not defined inside provider. – Shamseer Jun 14 '15 at 22:34

Provider dependancy not working in Config AngularJS

3 Answers3