I have a project where I make successful Http Get request from TypeScript (Angular HTTP Service) code to Web API controller and display the list in a grid. The project is using Angular JS 1.4.x and TypeScript successfully.

Full Project's GitHub URL. and the TypeScript code which calls to the server is below.

module App {
    export class StudentListService {
        private qService: ng.IQService;
        private httpService: ng.IHttpService;

        constructor($q: ng.IQService, $http: ng.IHttpService) {
            this.qService = $q;        
            this.httpService = $http;
        }

        get(): ng.IPromise<Object[]> {
            var self = this;
            var deffered = self.qService.defer();            
            self.httpService.get('/api/values').then((result: any): void => {
                if (result.status === 200) {
                    deffered.resolve(result.data);
                } else {
                    deffered.reject(result);
                }
            }, error => {
                deffered.reject(error);
            });

            return deffered.promise;
        }
    }

    StudentListService.$inject = ['$q', '$http'];
    angular.module('app').service('StudentListService', StudentListService);
}

Now, I want to add a custom header with the get request call. I have tried many ways, but TypeScript keep giving me build error. Any help or work around would be highly appreciated.

I have a project where I make successful Http Get request from TypeScript (Angular HTTP Service) code to Web API controller and display the list in a grid. The project is using Angular JS 1.4.x and TypeScript successfully.

Full Project's GitHub URL. and the TypeScript code which calls to the server is below.

module App {
    export class StudentListService {
        private qService: ng.IQService;
        private httpService: ng.IHttpService;

        constructor($q: ng.IQService, $http: ng.IHttpService) {
            this.qService = $q;        
            this.httpService = $http;
        }

        get(): ng.IPromise<Object[]> {
            var self = this;
            var deffered = self.qService.defer();            
            self.httpService.get('/api/values').then((result: any): void => {
                if (result.status === 200) {
                    deffered.resolve(result.data);
                } else {
                    deffered.reject(result);
                }
            }, error => {
                deffered.reject(error);
            });

            return deffered.promise;
        }
    }

    StudentListService.$inject = ['$q', '$http'];
    angular.module('app').service('StudentListService', StudentListService);
}

Now, I want to add a custom header with the get request call. I have tried many ways, but TypeScript keep giving me build error. Any help or work around would be highly appreciated.

• javascript
• angularjs
• http
• header
• typescript

Share Improve this question Follow asked Oct 22, 2015 at 13:16 Foyzul KarimFoyzul Karim 4,51255 gold badges5151 silver badges7272 bronze badges 2

• 1 What error message do you get? – MartyIX Commented Oct 22, 2015 at 13:32
• its build error. no method or property of the interface takes header values. – Foyzul Karim Commented Oct 22, 2015 at 13:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

As long as you are using correct typing file for angular you should be able to add header as a part of config, second argument which is of type ng.IRequestShortcutConfig which is an extension of IHttpProviderDefaults that has the header property.

get<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;

Also added much simplified code.

      export class StudentListService {

        static $inject = ['$q', '$http'];

        constructor(private qService: angular.IQService, 
                    private httpService: angular.IHttpService) { }

        get(): angular.IPromise<Object[]> {

            //Example of config structure
            var config: angular.IRequestShortcutConfig = {
                headers: {
                    "someheader":"somevalue"
                }
            }
            //add config and just return the promise directly instead of creating a deferred object. Promises are chainable
            return this.httpService.get('/api/values', config)
              .then((result: any) => result.data);

              //If you want to catch then use ".catch" instead of second argument to the "then" which is a better practice as any error that may happen inside your code in the then block will be caught as well.
        }
    }