title: error TS2339: Property 'handleError' does not exist on type 'HeroService' with Angular
body: <p>Alright guys, sorry about this question, as I know there are several already about Typescript when it compiles, but I'm encountering a flavor of this issue that I can't connect the dots with.</p>
  
  <p>I'm trying to follow the Angular Tour of Heroes app, and am trying to finish it up with <a href="https://angular.io/docs/ts/latest/tutorial/toh-pt6.html" rel="nofollow noreferrer">the chapter on Http</a>, but my <code>hero.service.ts</code> file outputs this error:</p>
  
  <pre><code>error TS2339: Property 'handleError' does not exist on type 'HeroService'
  </code></pre>
  
  <p>I know from the other questions on here that this most likely has something to do with how Typescript is configured, but there does not seem to be a consistent cause of this issue.  </p>
  
  <p>I'm not familiar enough with the idiosyncrasies of Typescript (or Angular) to troubleshoot the issue on my own.</p>
  
  <p>My code right now reads like this:</p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>import { Injectable }      from '@angular/core';
  import { Headers, Http }   from '@angular/http';
  
  import 'rxjs/add/operator/toPromise';
  
  import { Hero }            from './hero';
  
  
  @Injectable()
  export class HeroService {
  private heroesUrl: 'app/heroes'; //URL to web api
  
  constructor(private http: Http) { }
  
  getHeroes(): Promise&lt;Hero[]&gt; {
      return this.http.get(this.heroesUrl)
          .toPromise()
          .then(response =&gt; response.json().data as Hero[])
          .catch(this.handleError);
  }
  
  getHeroesSlowly(): Promise&lt;Hero[]&gt; {
      return new Promise&lt;Hero[]&gt;(resolve =&gt;
          setTimeout(resolve, 2000))
          .then(() =&gt; this.getHeroes());
  }
  
  getHero(id: number): Promise&lt;Hero&gt; {
      return this.getHeroes()
          .then(heroes =&gt; heroes.find(hero =&gt; hero.id === id));
    }
  }
  </code></pre>
  
  <p>I am a bit puzzled by the fact that the error message says it can't find the property on 'HeroService' which is a class created within the program and is not a part of Typescript itself.</p>
  
  <p>My <code>systemjs.config.js</code> file looks like this:</p>
  
  <p><strong>SYSTEMJS.CONFIG:</strong></p>
  
  <pre><code>/**
  * System configuration for Angular 2 samples
  * Adjust as necessary for your application needs.
  */
  (function (global) {
  System.config({
  paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
    // our app is within the app folder
    app: 'app',
    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    // other libraries
    'rxjs':                       'npm:rxjs',
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  },
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
    app: {
      main: './main.js',
      defaultExtension: 'js'
    },
    rxjs: {
      defaultExtension: 'js'
    },
    'angular2-in-memory-web-api': {
      main: './index.js',
      defaultExtension: 'js'
    }
  }
  });
  })(this);
  </code></pre>
  
  <p>My <code>package.json</code> file reads like this:</p>
  
  <p><strong>PACKAGE.JSON:</strong></p>
  
  <pre><code>{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
  "start": "tsc &amp;&amp; concurrently \"npm run tsc:w\" \"npm run lite\" ",
  "lite": "lite-server",
  "postinstall": "typings install",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
  "@angular/common": "2.0.0",
  "@angular/compiler": "2.0.0",
  "@angular/core": "2.0.0",
  "@angular/forms": "2.0.0",
  "@angular/http": "2.0.0",
  "@angular/platform-browser": "2.0.0",
  "@angular/platform-browser-dynamic": "2.0.0",
  "@angular/router": "3.0.0",
  "@angular/upgrade": "2.0.0",
  "core-js": "^2.4.1",
  "reflect-metadata": "^0.1.3",
  "rxjs": "5.0.0-beta.12",
  "systemjs": "0.19.27",
  "zone.js": "^0.6.23",
  "angular2-in-memory-web-api": "0.0.20",
  "bootstrap": "^3.3.6"
  },
  "devDependencies": {
  "concurrently": "^2.2.0",
  "lite-server": "^2.2.2",
  "typescript": "^2.0.2",
  "typings":"^1.3.2"
  }
  }
  </code></pre>
  
  <p>If this question is a duplicate of some other version of this question that I'm not seeing feel free to direct me to it.</p>
  
  <p>Thank you.</p>