Unknown provider: $q in an AngularJS application

Question

Can anyone tell me what I might be doing wrong. I have this code:

var app = angular.module('app',
[
    'angular-cache',
    'angular-loading-bar',
    'ngAnimate',
    'ngCookies',
    'pascalprecht.translate',
    'ui.router',
    'ui.bootstrap'  
])

app.config([
    '$httpProvider',
    '$q',
    ($httpProvider,
        $q) => {
    $httpProvider.interceptors.push(
        function () {
            return {
                'request': function (config) {
                    return config;
                },
                // optional method
                'requestError': function (rejection) {
                    return $q.reject(rejection);
                },
                // optional method
                'response': function (response) {
                    return response;
                },
                // optional method
                'responseError': function (rejection) {
                    return $q.reject(rejection);
                }
            }
        })
}])

When it runs I am getting the message:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $q http://errors.angularjs.org/1.5.0/$injector/unpr?p0=%24q at http://localhost:1828/lib/angular/angular.js:68:12 at http://localhost:1828/lib/angular/angular.js:4397:19 at getService (http://localhost:1828/lib/angular/angular.js:4550:39) at injectionArgs (http://localhost:1828/lib/angular/angular.js:4574:58) at Object.invoke (http://localhost:1828/lib/angular/angular.js:4596:18) at runInvokeQueue (http://localhost:1828/lib/angular/angular.js:4497:35) at http://localhost:1828/lib/angular/angular.js:4506:11 at forEach (http://localhost:1828/lib/angular/angular.js:321:20) at loadModules (http://localhost:1828/lib/angular/angular.js:4487:5) at createInjector (http://localhost:1828/lib/angular/angular.js:4409:19) http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=app&p1=Error%3A%20%…%20(http%3A%2F%2Flocalhost%3A1828%2Flib%2Fangular%2Fangular.js%3A4409%3A19)

When I comment out all this code and run my application it works and I don't get this error message.

Answer 1

You can inject service into config block. However you can use factory service of function as the interceptor. There is already factory example, so I will provider another function solution:

app.config(['$httpProvider', ($httpProvider) => {
    $httpProvider.interceptors.push(['$q', function($q) {
        return {
            'request': function(config) {
                return config;
            },
            // optional method
            'requestError': function(rejection) {
                return $q.reject(rejection);
            },
            // optional method
            'response': function(response) {
                return response;
            },
            // optional method
            'responseError': function(rejection) {
                return $q.reject(rejection);
            }
        }
    }])
}])

Answer 2

You can only inject providers into a config block, as it runs before any services have been loaded. $q is a service, so it's not defined when that block of code runs.

Answer 3

You cannot inject $q as a provider. Instead, define your interceptor in a factory then push it to $httpProvider.interceptors within config. Observe the following...

.config(['$httpProvider', function($httpProvider) {

    $httpProvider.interceptors.push('testInterceptor');
}]);

---

.factory('testInterceptor', ['$q', function($q) {

    return {
        'request': function (config) {
             return config;
         },
         'requestError': function (rejection) {
             return $q.reject(rejection);
         },
         'response': function (response) {
             return response;
         },
         'responseError': function (rejection) {
              return $q.reject(rejection);
         }
    }
}]);

JSFiddle Link - demo