Angularjs custom headers with interceptors

Question

I am trying to add a custom header using interceptors to every request I make on the app and I get the following error

Uncaught Error: [$injector:unpr] Unknown provider: httpRequestInterceptorProvider <- httpRequestInterceptor <- $http <- $templateFactory <- $view <- $state

// Ionic Starter App
(function () {

    'use strict';

    var app = angular
            .module('app', ['ionic', 'auth0.lock', 'angular-jwt'])
            .config(config)
            .factory(factory)

    factory.$inject = ['httpRequestInterceptor'];
    config.$inject = ['$stateProvider', '$urlRouterProvider', 'lockProvider', 'jwtOptionsProvider', '$httpProvider'];

    function factory(httpRequestInterceptor) {
        return {
            request: function (config) {
                config.headers['X-switch-using'] = isApple;
                return config;
            }
        }
    }

    function config($stateProvider, $urlRouterProvider, lockProvider, jwtOptionsProvider, $httpProvider) {
        $stateProvider

        // setup an abstract state for the tabs directive
                .state('app', {
                    url: '/app',
                    abstract: true,
                    templateUrl: 'components/menu/menu.html',
                })
                .state('app.home', {
                    url: '/home',
                    views: {
                        'menuContent': {
                            templateUrl: 'components/home/home.html'
                        }
                    }
                })
                .state('app.dashboard', {
                    url: '/dashboard',
                    views: {
                        'menuContent': {
                            templateUrl: 'components/template/template.html'
                        }
                    }
                })
                .state('app.signin', {
                    url: '/login',
                    views: {
                        'menuContent': {
                            templateUrl: 'components/login/login.html'
                        }
                    }
                });

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/home');
        $httpProvider.interceptors.push('httpRequestInterceptor');

        lockProvider.init({
            clientID: AUTH0_CLIENT_ID,
            domain: AUTH0_DOMAIN,
            options: {
                auth: {
                    redirect: false,
                    params: {
                        scope: 'openid',
                        device: 'Mobile device'
                    }
                }
            }
        });

        // Configuration for angular-jwt
        jwtOptionsProvider.config({
            tokenGetter: function () {
                return localStorage.getItem('id_token');
            },
            whiteListedDomains: ['localhost'],
            unauthenticatedRedirectPath: '/login'
        });
    }
})();

When I try to $httpProvider.interceptors.push('httpRequestInterceptor'); Any ideas? Cheers!

Sajan · Accepted Answer · 2016-10-18 13:05:23Z

2

The problem is you are inject interceptor here factory.$inject = ['httpRequestInterceptor']; but what exactly the httpRequestInterceptor is ? you have not create anything with that name. What you need to do is change below functions name to httpRequestInterceptor from factory:

function factory(httpRequestInterceptor)

and make it function httpRequestInterceptor()

Then replace .factory(factory) with .factory(httpRequestInterceptor) and you can remove factory.$inject if you dont need to inject anything else.

answered Oct 18, 2016 at 13:05

Sajan

1,9232 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shashank Agrawal · Accepted Answer · 2016-10-18 13:08:52Z

1

Problem 1

The first problem is that there is no dependency in your app like httpRequestInterceptor.

Problem 2

The 2nd major problem is that you can not inject a simple factory or service in the config phase of Angular.

From the docs

Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

So consider changing your code like this:

// Ionic Starter App
(function () {

    'use strict';

    var app = angular
            .module('app', ['ionic', 'auth0.lock', 'angular-jwt'])
            .config(config)
            //.factory(factory)             // Removed factory

    config.$inject = ['$stateProvider', '$urlRouterProvider', 'lockProvider', 'jwtOptionsProvider', '$httpProvider'];

    function factory() {
        return {
            request: function (config) {
                config.headers['X-switch-using'] = isApple;
                return config;
            }
        }
    }

    function config($stateProvider, $urlRouterProvider, lockProvider, jwtOptionsProvider, $httpProvider) {
        /** your state configuration here **/

        $httpProvider.interceptors.push(factory);

        /** your lockprovider and jwtOptionsProvider here **/
    }
})();

answered Oct 18, 2016 at 13:08

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

1 Comment

Rareș Urs Over a year ago

Thank you Shashank Agrawal, you are a genius!

Thalaivar · Accepted Answer · 2016-10-18 13:08:32Z

0

I don't see a factory with httpRequestInterceptor which you are injecting in your factory named factory. If at all the factory httpRequestInterceptor is another module, you have inject that module as a dependency in your app module.

var app = angular
            .module('app', ['ionic', 'auth0.lock', 'angular-jwt','inject
                              the module which has the httpRequestInterceptor factory'])
            .config(config)
            .factory(factory)

answered Oct 18, 2016 at 13:08

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

Collectives™ on Stack Overflow

Angularjs custom headers with interceptors

3 Answers 3

Comments

Problem 1

Problem 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Problem 1

Problem 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related