Angular TypeScript service this is undefined

Question

Here is my Angular TypeScript Interceptor:

export module httpMock_interceptor {
  export class Interceptor  {
      static $inject: string[] = ['$q'];
      constructor(public $q: ng.IQService) {}
       public request(config: any) {
         console.log(this);
       }
     }
   }

Here is my module where I am registering as service.

   import {httpMock_interceptor as interceptor} from './httpMock.interceptor';
   var httpMock: ng.IModule = angular.module("httpMockTs", []);
   httpMock.service("httpMockInterceptor",interceptor.Interceptor);
   httpMock.config.$inject = ['$httpProvider'];
   httpMock.config(['$httpProvider', function ($httpProvider:  ng.IHttpProvider) {
$httpProvider.interceptors.unshift('httpMockInterceptor');
}]);

When the app starts running, the interceptor constructor initializing the $q service, but when it goes to the method request where I am use this keyword, browser says this is undefined. Can anyone tell me where I am doing the mistake.

And Here is my transpiled code for interceptor

export var httpMock_interceptor;
 (function (httpMock_interceptor) {
   class Interceptor {
    constructor(_q) {
        this._q = _q;
    }
    request(config) {
        console.log(this);
    }
   }
Interceptor.$inject = ['$q'];
httpMock_interceptor.Interceptor = Interceptor;
})(httpMock_interceptor || (httpMock_interceptor = {}));

Module

import { httpMock_interceptor as interceptor } from './httpMock.interceptor';
var httpMock = angular.module("httpMockTs", []);
httpMock.service("httpMockInterceptor", interceptor.Interceptor);
httpMock.config.$inject = ['$httpProvider'];
httpMock.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.unshift('httpMockInterceptor');
}]);
export { httpMock };

maybe it helps when you show us the transpiled JavaScript code? — hgoebl
– hgoebl, Commented Oct 9, 2015 at 14:14

Kieran Ryan · Accepted Answer · 2016-01-09 14:42:58Z

1

try using an arrow function that maintains a reference as "this" to the container object or rather interceptor:

public request = (config: any) => {
  console.log(this);
}

For background see: Lambdas and using 'this' @ http://www.typescriptlang.org/Handbook#functions

answered Jan 9, 2016 at 14:42

Kieran Ryan

5912 gold badges8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

billc.cn · Accepted Answer · 2015-10-09 16:02:10Z

0

According to the doc, the interceptor should be a function that returns an object literal with properties like request, so I would guess the request function is called directly without any this object.

answered Oct 9, 2015 at 16:02

billc.cn

7,3443 gold badges43 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular TypeScript service this is undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related