how to Inject Interceptor service in angularAMD config option

Question

I am using angularAMD with require js and I have written an interceptor service which I want to register with $httpProvider.interceptors in my app config file but it throwing error as

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=cookieInjectorProvider%…eInjector%20%3C-%20%24http%20%3C-%20%24templateRequest%20%3C-%20%24compile(…)

Below is my implimentation

define(["angularAMD", "angular-route", "ui-bootstrap","ngCookies","common/service/interceptor-service"], function(angularAMD){
"use strict";

var app = angular.module("app", ["ui.router", "ui.bootstrap","ngAnimate","ngTouch","angular-carousel","ngCookies"]);

  //route
  app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider","$httpProvider", function($stateProvider, $urlRouterProvider, $locationProvider,$httpProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state("home", angularAMD.route({

     url: "/",
     views:  {  

       'header':{
          /*...*/
        },

      },
      'content': {
        /*...*/
      },

      'footer': {
        /*...*/

      }
  }));
  **//angular is not able to find 'cookieInjector' service**
  $httpProvider.interceptors.push('cookieInjector');
  }]);


  // Bootstrap Angular when DOM is ready
  return angularAMD.bootstrap(app, false, document.getElementsByTagName("body")[0]);
});

and my "cookieInjector file is" this service requires another service and it is also implemented in a similar way

    define([
  'angularAMD',
  "common/service/cookie-service"
  ], function(angularAMD){
    angularAMD.service("cookieValidator",[function(){
      this.isLoggedIn = false;
      this.getIsLoggedIn = function(){
          return this.isLoggedIn;
      };
      this.setIsLoggedIn = function(status){
          this.isLoggedIn = status;
      };  
    }])
    .factory('cookieInjector', ['$q','cookieValidator', 'cookieService',function($q,cookieValidator,cookieService) {
      var cookieInjector = {
        request: function(config) {
          var cookie = cookieService.getCookie();
          if(!cookie){
            cookieValidator.setIsLoggedIn(false);
            //$location.path('/login');
          }else{
            cookieValidator.setIsLoggedIn(true);
          }
            config.headers['Token'] = cookie ? cookie : null;
            return config;
        },
        response: function(response) {
            response.config.responseTimestamp = new Date().getTime();
            return response;
        },
        responseError: function(response) {
            // Cookie has expired
            if(response.status === 401 || response.status === 403) {
              cookieService.destroyCookie();
              cookieValidator.setIsLoggedIn(false);
            }
            return $q.reject(response);
        }
    };
    return cookieInjector;
  }]);
})

I am stuck completely. Thanks for any help.

Answer 1

angular is not able to find 'cookieInjector' service

This is probably because cookieInjector is not available at the moment app.config run. From what I remember angularAMD.factory() will only enject your factory/service into you app after app.config() has been ran.

So in this case, another global angular module should be used instead of using angularAMD

create a file cookieInjector.js

angular.module('cookieModule', []).facotry('cookieInjector', ['$q', 'cookieValidator', 'cookieService', function($q, cookieValidator, cookieService) {
    var cookieInjector = {
        request: function(config) {
            var cookie = cookieService.getCookie();
            if (!cookie) {
                cookieValidator.setIsLoggedIn(false);
                //$location.path('/login');
            } else {
                cookieValidator.setIsLoggedIn(true);
            }
            config.headers['Token'] = cookie ? cookie : null;
            return config;
        },
        response: function(response) {
            response.config.responseTimestamp = new Date().getTime();
            return response;
        },
        responseError: function(response) {
            // Cookie has expired
            if (response.status === 401 || response.status === 403) {
                cookieService.destroyCookie();
                cookieValidator.setIsLoggedIn(false);
            }
            return $q.reject(response);
        }
    };
    return cookieInjector;
}]);

Then init can config your app.

// requireJS config
requirejs.config({
    path:{
        cookieInjector: 'path/to/cookieInjector'
    }
    // ... your codes

    shim: {
        // ... your codes
        // make sure cookie injector only load after angularJS is loaded.
        cookieInjector: ["angular"];
    }
});

// your app.js (?) file
define(["angularAMD", "cookieInjector", "angular-route", "ui-bootstrap", "ngCookies", "common/service/interceptor-service"], function(angularAMD) {
    "use strict";

    var app = angular.module("app", ["cookieModule", "ui.router", "ui.bootstrap", "ngAnimate", "ngTouch", "angular-carousel", "ngCookies"]);

    //route
    app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", "$httpProvider", function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
        .state("home", angularAMD.route({

            url: "/",
            views: {

                'header': {
                    /*...*/
                },

            },
            'content': {
                /*...*/
            },

            'footer': {
                /*...*/

            }
        })); 
        // It should be loaded now
        $httpProvider.interceptors.push('cookieInjector');
    }]);


    // Bootstrap Angular when DOM is ready
    return angularAMD.bootstrap(app, false, document.getElementsByTagName("body")[0]);
});