Why do my AngularJS custom Interceptor not working

Question

I have been following this article http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/ to make a interceptor which could add a server based token to all my request. I have made the following code in a js file. In the below file SessionHolder is a file that stores token on login. but currently I am hard-coding the text.

(function (module) {
    module.factory('sessionManager', ['sessionHolder', function (sessionHolder) {
        console.log("Reached sessionManager");
        var sessionManager = {
            request: function (config) {
                //if (sessionHolder.validation_capability) {
                config.headers['x-session-token'] = 'saurabh';
                config.headers['baap'] = 'saurabh';//sessionHolder.AuthorisationToken;
                //}
                return config;
            }
        };
        return sessionManager;


    }]);

}(angular.module("MarketPlan")));

where "MarketPlan" is my ng-app.

Now in the app.js file, I am doing the following:

    (function (app) {
        app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, datepickerPopupConfig, datepickerConfig, $httpProvider) {

            // override defaults for date picker
            datepickerPopupConfig.showButtonBar = false;
            datepickerConfig.showWeeks = false;
    
//guiding initial routes
            $urlRouterProvider.otherwise(document.cookie.indexOf('main=1') !== -1 ? '/home' : '/business');
    
//setting theme configs
            $mdThemingProvider.definePalette('grey', {
                '50': 'eeeeee',
                '100': 'ffffff',
                '200': 'ffffff',
                '300': 'ffffff',
                '400': 'ffffff',
                '500': 'ffffff',
                '600': 'ffffff',
                '700': 'ffffff',
                '800': 'ffffff',
                '900': 'ffffff',
                'A100': 'ffffff',
                'A200': 'ffffff',
                'A400': 'ffffff',
                'A700': 'ffffff',
                'contrastDefaultColor': 'dark', 
                'contrastDarkColors': ['50', '100', '200'],
                'contrastLightColors': undefined 
            });
    
    // I am trying to push the custom interceptor here, as the article says it needs //to be done in the app config
            $httpProvider.interceptors.push('sessionManager');
        });
    
    
    }(angular.module("MarketPlan", ["my dependencies here"])));

With this code, I am getting the Unknown Session Provider error as soon as application starts.

I am unable to figure out why this is happening. FYI, my understanding is that an interceptor (factory) should be registered in your app. The name of this interceptor should be pushed into the $httpProvider interceptor array in config (i.e when application bootstraps).

Is this a correct understanding ?? Is there something that's not done chronological here.

Please guide me through.

Answer 1

Well, I just realized that I have been doing a blunder here. Actually I am following a module-based structure for my project wherein all small modules are grouped as dependencies in the main application (app.js file).

Earlier, I tried to register the interceptor in one such module. However, as is obvious, it should be registered in main app (ng-app).

Declaring them in main app solved the issue for me. So now my app.js goes like this:

(function (app) {
    app.config(function ($stateProvider, $urlRouterProvider, $mdThemingProvider, datepickerPopupConfig, datepickerConfig, $httpProvider) {

        //pushing interceptor here
        $httpProvider.interceptors.push('sessionManager');

    });

    //declaring interceptor here
    app.factory('sessionManager', ['sessionHolder', function (sessionHolder) {
        console.log("Reached sessionManager");
        var sessionManager = {
            request: function (config) {
                //if (sessionService.validation_capability) {
                config.headers['x-session-token'] = 'saurabh';
                config.headers['baap'] = 'saurabh';//sessionService.AuthorisationToken;
                //}
                return config;
            }
        };
        return sessionManager;


    }]);

    //declaring service to store token here
    app.service('sessionHolder', function () {
        console.log("Reached sessionHolder");
        var self = this;
        this.validation_capability = false;
        this.saveAuthorisationToken = function (token) {
            self.AuthorisationToken = token;
            self.validation_capability = true;
        }
    });

    //run function of the application
    app.run(function ($rootScope) {
     //runtime changes here  
    });

    app.controller('AppController', function () {
    //controlled define in app, in case needed
    });

}(angular.module("MarketPlan", ["my dependencies"])));

This now is working fine. Hope it might help someone someday