title: Angular JS TypeScript IHttpService inject custom header value
body: <p>I have a project where I make successful Http Get request <strong>from TypeScript</strong> (Angular HTTP Service) code <strong>to Web API controller</strong> and display the list in a grid. The project is using Angular JS 1.4.x and TypeScript successfully.</p>
  
  <p><strong>Full Project's <a href="https://github.com/foyzulkarim/VirtualTechAcademy/tree/master/Practices/AngularTypeScriptApps/AngularTypeScriptApps.App3" rel="nofollow">GitHub URL</a>.</strong> and the TypeScript code which calls to the server  is below. </p>
  
  <pre><code>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&lt;Object[]&gt; {
              var self = this;
              var deffered = self.qService.defer();            
              self.httpService.get('/api/values').then((result: any): void =&gt; {
                  if (result.status === 200) {
                      deffered.resolve(result.data);
                  } else {
                      deffered.reject(result);
                  }
              }, error =&gt; {
                  deffered.reject(error);
              });
  
              return deffered.promise;
          }
      }
  
      StudentListService.$inject = ['$q', '$http'];
      angular.module('app').service('StudentListService', StudentListService);
  }
  </code></pre>
  
  <p><strong><em>Now, I want to add a custom header with the get request call.</em></strong> I have tried many ways, but TypeScript keep giving me build error. Any help or work around would be highly appreciated. </p>