title: Angular2 Http Request
body: <p>Hi I am trying to make a get request using the <code>HTTP</code> module in <code>Angular2</code>.</p>
  
  <p>Everything compiles fine in <code>Typescript</code> (1.5), but <code>Chrome</code> shows the following error the in console: </p>
  
  <pre><code>EXCEPTION: Error during instantiation of EntryList!. ORIGINAL
  EXCEPTION: TypeError: Cannot read property 'merge' of undefined
  ORIGINAL STACKTRACE: TypeError: Cannot read property 'merge' of undefined
  at mergeOptions (angular2.dev.js:27991)  
  at execute.Http.get (angular2.dev.js:28052)  
  at EntryService.getEntries (services.js:17)
  at new EntryList (entry-list.js:20)
  </code></pre>
  
  <h2>Services.ts</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="../typings/angular2/angular2.d.ts" /&gt;
  import { Http, Observable } from "angular2/angular2"
  
  export class EntryService {
      private _entries: Array&lt;string&gt;;
      private _http : Http;
  
      constructor() {     
          this._entries = ["test1", "test2", "test3"];
          this._http = new Http;      
      }
  
      get Entries() : Array&lt;string&gt; {
          return this._entries;
      }
  
      getEntries()
      {
          console.log(this._http);
          return this._http.get('http://localhost:53338/api/decisions')       
              .toRx()
              .map((response) =&gt; { 
                  response.json()
              });     
      }
  }
  </code></pre>
  
  <h2>entry-list.ts</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="../typings/angular2/angular2.d.ts" /&gt;
  /// &lt;reference path="../modules/services.ts" /&gt;
  
  import { Component, View, NgFor } from "angular2/angular2"
  import { EntryService } from "modules/services"
  
  @Component({
      selector: 'entry-list'  
  })
  @View({
      directives: [ NgFor ],
      templateUrl: "../views/entry-list.html" 
  })
  export class EntryList {
      entries: Array&lt;string&gt;; 
  
      constructor(public service: EntryService) {     
          this.entries = this.service.Entries;
          this.service.getEntries().subscribe((response) =&gt; {     
              console.log(response);
          }); 
      }
  }
  </code></pre>
  
  <h2>app.ts</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
  /// &lt;reference path="components/entry-list.ts" /&gt;
  /// &lt;reference path="modules/services.ts" /&gt;
  
  import { Component, View, bootstrap, NgFor } from "angular2/angular2"
  import { EntryList } from "components/entry-list"
  import { EntryService } from "modules/services"
  
  @Component({
      selector : "app",
      bindings: [ EntryService ]  
  })
  @View({
      directives: [ EntryList ],
      templateUrl: "views/app.html"   
  })
  class App { 
      constructor() {
          console.log('hit');
      }
  }
  
  bootstrap(App);
  </code></pre>
  
  <h2>index.html</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;SCM&lt;/title&gt;
          &lt;script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.88/traceur-runtime.js"&gt;&lt;/script&gt;
          &lt;script src="https://jspm.io/system@0.16.js"&gt;&lt;/script&gt;      
          &lt;script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;app&gt;&lt;/app&gt;
          &lt;script&gt;System.import('app')&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>I did look at the API documentation on the <code>angular.io</code> site, but can't see whats wrong.</p>
  
  <h1>UPDATE</h1>
  
  <h2>Services.ts</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="../typings/angular2/angular2.d.ts" /&gt;
  import { Http, Observable, httpInjectables } from "angular2/angular2"
  
  export class EntryService {
      private _entries: Array&lt;string&gt;;    
  
      constructor(private http: Http) {       
          this._entries = ["test1", "test2", "test3"];            
      }
  
      get Entries() : Array&lt;string&gt; {
          return this._entries;
      }
  
      getEntries()
      {
          console.log(this.http);
          return this.http.get('http://localhost:53338/api/decisions')        
              .toRx()
              .map((response) =&gt; { 
                  response.json()
              });     
      }
  }
  </code></pre>
  
  <h2>entry-list.ts</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="../typings/angular2/angular2.d.ts" /&gt;
  /// &lt;reference path="../modules/services.ts" /&gt;
  
  import { Component, View, NgFor, Http, httpInjectables } from "angular2/angular2"
  import { EntryService } from "modules/services"
  
  @Component({
      selector: 'entry-list',
      bindings : [ Http, httpInjectables ]
  })
  @View({
      directives: [ NgFor ],
      templateUrl: "../views/entry-list.html" 
  })
  export class EntryList {
      entries: Array&lt;string&gt;; 
  
      constructor(public service: EntryService) {     
          this.entries = this.service.Entries;
          this.service.getEntries().subscribe((response) =&gt; {     
              console.log(response);
          }); 
      }
  }
  </code></pre>
  
  <h2>app.ts</h2>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="typings/angular2/angular2.d.ts" /&gt;
  /// &lt;reference path="components/entry-list.ts" /&gt;
  /// &lt;reference path="modules/services.ts" /&gt;
  
  import { Component, View, bootstrap, NgFor, Http, httpInjectables } from "angular2/angular2"
  import { EntryList } from "components/entry-list"
  import { EntryService } from "modules/services"
  
  @Component({
      selector : "app",
      bindings: [ EntryService, Http, httpInjectables ]   
  })
  @View({
      directives: [ EntryList ],
      templateUrl: "views/app.html"   
  })
  class App { 
      constructor() {
          console.log('hit');
      }
  }
  
  bootstrap(App);
  </code></pre>
  
  <p>Without any changes into <code>index.html</code></p>
  
  <p><strong>Edit: My services.ts file changes to get this working:</strong></p>
  
  <pre class="lang-typescript prettyprint-override"><code>/// &lt;reference path="../typings/angular2/angular2.d.ts" /&gt;
  import { Injector, Http, httpInjectables } from "angular2/angular2"
  
  export class EntryService {
      private _entries: Array&lt;string&gt;;    
      private http: Http;
  
      constructor() {     
          this._entries = ["test1", "test2", "test3"];        
  
          var injector = Injector.resolveAndCreate([
                  httpInjectables,
                  Http
              ]);
          this.http = injector.get(Http);                 
      }
  
      get Entries() : Array&lt;string&gt; {
          return this._entries;
      }
  
      getEntries()
      {       
          return this.http.get('http://localhost:53338/api/decisions')        
              .toRx()
              .map(response =&gt; response.json());      
      }
  }
  </code></pre>