user1010101 user1010101 - 3 months ago 11
AngularJS Question

Cannot read property 'defaults' of undefined when trying to add token inside stateChangeStart

My objective is to to send a token as Authorization header to each of the service calls in my application.

Here is my code

'use strict';

var properties = {};

angular.module('nbaportalUi', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize',
'ngResource', 'ui.router', 'ui.bootstrap', 'uiSwitch'])
.run(['$rootScope', '$state', '$window', '$cookies', function ($rootScope, $state, $window, $cookies, $http) {

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {



$http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ;


});
}])


.config( function($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider
.otherwise('/home');

// note the 'abstract:true' state below - it can not get activated
// it is activated implicitly when one of its descendants are activated
$stateProvider
.state('app', {
abstract: true,
controller: 'MainCtrl',
templateUrl: 'app/main/main.html'
})
.state('app.overview', {
url: '/overview',
templateUrl: 'app/overview/summary.html',
controller: 'OverviewCtrl'
})
.state('loginPage', {
url: '/login',
templateUrl: 'app/login/login.html',
controller: 'LoginCtrl'
})
.state('errorPage', {
url: '/error404',
templateUrl: 'app/404.html'
});


})
.constant('ENV', {
'name': 'dev',
'apiEndpoint': 'https://api.blah.com/nba/v1/team/'
})
;


I am inserting
$http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ;
inside $stateChangeStart because it is called every time.

However when i attempt to this i get an error saying

angular.js:11706 TypeError: Cannot read property 'defaults' of undefined
at index.js:43


This error is refering to the following line of code ->
$http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ;


However when i try to add the token as authorization adder outside stateChangeStart as follows it works:

'use strict';

var properties = {};

angular.module('nbaportalUi', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize',
'ngResource', 'ui.router', 'ui.bootstrap', 'uiSwitch'])
.run(['$rootScope', '$state', '$window', '$cookies', function ($rootScope, $state, $window, $cookies) {

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {






});
}])


.config( function($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider
.otherwise('/home');

// note the 'abstract:true' state below - it can not get activated
// it is activated implicitly when one of its descendants are activated
$stateProvider
.state('app', {
abstract: true,
controller: 'MainCtrl',
templateUrl: 'app/main/main.html'
})
.state('app.overview', {
url: '/overview',
templateUrl: 'app/overview/summary.html',
controller: 'OverviewCtrl'
})
.state('loginPage', {
url: '/login',
templateUrl: 'app/login/login.html',
controller: 'LoginCtrl'
})
.state('errorPage', {
url: '/error404',
templateUrl: 'app/404.html'
});


})
.constant('ENV', {
'name': 'dev',
'apiEndpoint': 'https://api.blah.com/nba/v1/team/'
})
;

angular.module('nbaportalUi').run(function($http) {
$http.defaults.headers.common.Authorization = 'Bearer carmeloanthony' ;

});


I would prefer to get my first approach working. I appreciate any help I can get.

Answer

You have to include the $http service as following (your forgot to put in the array) :

.run(['$rootScope', '$state', '$window', '$cookies','$http', function ($rootScope, $state, $window, $cookies, $http) {