title: Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]
body: <p>I have a problem with HTTP in Angular. </p>
  
  <p>I just want to <code>GET</code> a <code>JSON</code> list and show it in the view. </p>
  
  <h2>Service class</h2>
  
  <pre><code>import {Injectable} from "angular2/core";
  import {Hall} from "./hall";
  import {Http} from "angular2/http";
  @Injectable()
  export class HallService {
      public http:Http;
      public static PATH:string = 'app/backend/'    
  
      constructor(http:Http) {
          this.http=http;
      }
  
      getHalls() {
             return this.http.get(HallService.PATH + 'hall.json').map((res:Response) =&gt; res.json());
      }
  }
  </code></pre>
  
  <p>And in the <code>HallListComponent</code> I call the <code>getHalls</code> method from the service:</p>
  
  <pre><code>export class HallListComponent implements OnInit {
      public halls:Hall[];
      public _selectedId:number;
  
      constructor(private _router:Router,
                  private _routeParams:RouteParams,
                  private _service:HallService) {
          this._selectedId = +_routeParams.get('id');
      }
  
      ngOnInit() {
          this._service.getHalls().subscribe((halls:Hall[])=&gt;{ 
              this.halls=halls;
          });
      }
  }
  </code></pre>
  
  <p>However, I got an exception: </p>
  
  <blockquote>
    <p>TypeError: this.http.get(...).map is not a function in [null]</p>
  </blockquote>
  
  <h2>hall-center.component</h2>
  
  <pre><code>import {Component} from "angular2/core";
  import {RouterOutlet} from "angular2/router";
  import {HallService} from "./hall.service";
  import {RouteConfig} from "angular2/router";
  import {HallListComponent} from "./hall-list.component";
  import {HallDetailComponent} from "./hall-detail.component";
  @Component({
      template:`
          &lt;h2&gt;my app&lt;/h2&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `,
      directives: [RouterOutlet],
      providers: [HallService]
  })
  
  @RouteConfig([
      {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},
      {path: '/hall-list', name: 'HallList', component:HallListComponent}
  ])
  
  export class HallCenterComponent{}
  </code></pre>
  
  <h2>app.component</h2>
  
  <pre><code>import {Component} from 'angular2/core';
  import {ROUTER_DIRECTIVES} from "angular2/router";
  import {RouteConfig} from "angular2/router";
  import {HallCenterComponent} from "./hall/hall-center.component";
  @Component({
      selector: 'my-app',
      template: `
          &lt;h1&gt;Examenopdracht Factory&lt;/h1&gt;
          &lt;a [routerLink]="['HallCenter']"&gt;Hall overview&lt;/a&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `,
      directives: [ROUTER_DIRECTIVES]
  })
  
  @RouteConfig([
      {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}
  ])
  export class AppComponent { }
  </code></pre>
  
  <h2>tsconfig.json</h2>
  
  <pre><code>{
    "compilerOptions": {
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    },
    "exclude": [
      "node_modules"
    ]
  }
  </code></pre>