Undefined 'this.variable' during runtime debugging in callback in Angular 4 Typescript App

Question

My SO friends,

I have started working on a Angular4 app and came across the following (webpack?) odd behaviour. When runtime-debugging in chrome inside the callback of the observable getHistory (an API call), this.varTimeSeries shows as undefined when I hover over it.

Console.log(this.varTimeSeries) logs the correct object in the console though.

You can see I am correctly using the fat arrow syntax => that should return the Component's this inside the callback.

Any ideas why this happens?

public getHistory() {

    this.varHistoryService.getHistory(this.selectedConfig.NAME)
        .subscribe(res => {
            this.varTimeSeries = res;
            console.log(this.varTimeSeries);
        },
        errors => {
            console.log(errors);
        });
}

This is what my tsconfig.webpack.json file looks like:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "importHelpers": true,
    "noEmitHelpers": true,
    "strictNullChecks": false,
    "lib": [
      "es2015",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "node"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "Client/**/*.spec.ts",
    "Client/**/*.e2e.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "./compiled",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 1

The issue was in the tsconfig.json file which was incorrectly referencing es5!

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "devtool": "source-map",
    "sourceMap": true,
    "noEmit": true,
    "importHelpers": true,
    "noEmitHelpers": true,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "noImplicitReturns": true,
    "lib": [
      "dom",
      "es6"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "jasmine",
      "node",
      "source-map",
      "uglify-js",
      "webpack"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "compiled"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}