Search code examples
javascriptangularjsangular-http-interceptors

How to inject my service into interceptor?


I have created interceptor as follows:

(function() {
    'use strict';
    angular.module('sbApp').factory('ErrorResponseInterceptor', ErrorResponseInterceptor).config(ErrorResponseInterceptorConfig);

    ErrorResponseInterceptorConfig.$inject = [ '$httpProvider' ];
    ErrorResponseInterceptor.$inject = [ '$rootScope', '$q', '$injector'];

    function ErrorResponseInterceptorConfig($httpProvider) {
        $httpProvider.interceptors.push('ErrorResponseInterceptor');
    }

    function ErrorResponseInterceptor($rootScope, $q, $injector) {
    // Here I handle my http responses

    }
})();

I have other service defined in file myService.js I want to use methods of this service in interceptor above, so I did following changes in the above code :

(function() {
    'use strict';
    angular.module('sbApp').factory('ErrorResponseInterceptor', ErrorResponseInterceptor).config(ErrorResponseInterceptorConfig);

    ErrorResponseInterceptorConfig.$inject = [ '$httpProvider' ];
    ErrorResponseInterceptor.$inject = [ '$rootScope', '$q', '$injector', 'myService'];

    function ErrorResponseInterceptorConfig($httpProvider) {
        $httpProvider.interceptors.push('ErrorResponseInterceptor');
    }

    function ErrorResponseInterceptor($rootScope, $q, $injector, myService) {
        // Here I handle my http responses

    }
})();

I have got following error:

Uncaught Error: [$injector:unpr] Unknown provider: myServiceProvider <- myService <- ErrorResponseInterceptor <- $http <- $translateStaticFilesLoader

myService.js code :

(function() {
    'use strict';
    angular.module('sbApp').factory('myService', myService);

    myService.$inject = [ '$rootScope', '$http', 'restAPIService', '$log',
            '$filter', '$interval', '$location' ];

        function myService($rootScope, $http, restAPIService, $log, $filter,
                $interval, $location) {
                ......
            return {
                add : add,
            };
            .....
            function add(module, event) {
            var e = {
              ..........
            }
            .......     
                return $rootScope.myarray.push(e);
            }

        }
    })();

Is it allowed to use myService into interceptor, How can I pass it to interceptor?


Solution

  • To get the instance of service object inside the interceptor use:

     $injector.get('serviceName');
    

    Please try something like this:

    (function() {
        'use strict';
        angular.module('sbApp').factory('ErrorResponseInterceptor', ErrorResponseInterceptor).config(ErrorResponseInterceptorConfig);
    
        ErrorResponseInterceptorConfig.$inject = [ '$httpProvider' ];
        ErrorResponseInterceptor.$inject = [ '$rootScope', '$q', '$injector'];
    
        function ErrorResponseInterceptorConfig($httpProvider) {
            $httpProvider.interceptors.push('ErrorResponseInterceptor');
        }
    
        function ErrorResponseInterceptor($rootScope, $q, $injector) {
            var myService = $injector.get('myService');
            // Here I handle my http responses
    
        }
    })();