how to Inject Interceptor service in angularAMD config option - angularjs

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]);
});