title: Ionic 2 - Importing/Injecting Angular 2 HTTP Component
body: <p>I have an ionic 2 app that I've been testing using local data. Now, I am attempting to make some Ajax requests to my api to get the data.</p>
  
  <p>In my <code>app.js</code> file, I am defining my component like so:</p>
  
  <pre><code>import {UserProvider} from './providers/user-provider';
  ...
      @App({
        templateUrl: 'build/app.html',
        providers: [UserProvider]
      })
  </code></pre>
  
  <p>Then, my <code>user-provider.js</code> file is defined like so:</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Http, httpInjectables} from 'angular2/http';
  
  @Injectable()
  export class UserProvider {
      constructor(http: Http) {
          http.get('www.someURL.com').toRx().map(res =&gt; res.json())
              .subscribe(data =&gt; console.log(data));
      }
  }
  </code></pre>
  
  <p>Then, lastly, I am initializing my "Sign Up" view with my <code>signup.js</code> file:</p>
  
  <pre><code>import {Page, NavController} from 'ionic/ionic';
  import {TabsPage} from '../tabs/tabs';
  import {UserProvider} from '../../providers/user-provider';
  
  @Page({
    templateUrl: 'build/pages/signup/signup.html'
  })
  export class SignupPage {
    constructor(nav: NavController, userProvider: UserProvider) {
      this.userProvider = userProvider;
      this.nav = nav;
    }
  }
  </code></pre>
  
  <p>My expected result is that on initialization of my signup view, the <code>UserProvider</code> will be injected. As such, it's constructor will run, which will fire off the <code>http.get</code> function within the <code>UserProvider</code>'s constructor. I should then see a network call in my browsers network tab.</p>
  
  <p>However, I'm getting this error: </p>
  
  <pre><code>EXCEPTION: Error during instantiation of UserProvider! (SignupPage -&gt; UserProvider)
  
  app.bundle.js:33693 TypeError: http.get(...).toRx is not a function
      at new UserProvider (app.bundle.js:60706)
  </code></pre>
  
  <p>Why is <code>http.get.toRx()</code> causing an error? I initially tried this with promises like so:</p>
  
  <pre><code>http.get('www.someURL.com').then(() =&gt; {
              console.log('test');
          });
  </code></pre>
  
  <p>but that throws a similar error.</p>