title: Angular 2 custom http service throws Error: No provider for XHRBackend
body: <p>I wanted to create my own http service so that I could use it like an http interceptor but I get a very long error that starts with: <code>EXCEPTION: Uncaught (in promise): Error: No provider for XHRBackend!</code></p>
  
  <p>http.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, XHRBackend, RequestOptions, RequestOptionsArgs, Request, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  
  
  @Injectable()
  export class HttpService extends Http {
      constructor(backend: XHRBackend, options: RequestOptions) {
          console.log('HttpService constructor');
          super(backend, options);
      }
  
      request(url: string|Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
          console.log('HttpService request');
          return super.request(url, options);
      }    
  }
  
  export const HTTP_SERVICE = {
      provide: HttpService,
      useFactory: (backend: XHRBackend, options: RequestOptions) =&gt; {
          return new HttpService(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
  };
  </code></pre>
  
  <p>And then I add it in app.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppRoutingModule } from './app-routing.module';
  
  import { AppComponent } from './app.component';
  
  import { AuthService } from './auth/auth.service';
  import { HTTP_SERVICE } from './shared/http/http.service';
  
  @NgModule({
      imports: [
          BrowserModule,
          AppRoutingModule
      ],
      declarations: [
          AppComponent
      ],
      providers: [
          AuthService,
          HTTP_SERVICE
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>But it does not work when I inject it into a constructor in a component. I get the error mentioned.</p>
  
  <p>I also read that I could do:</p>
  
  <pre><code>{ provide: Http, useClass: HttpService}
  </code></pre>
  
  <p>from this blog: <a href="http://www.adonespitogo.com/articles/angular-2-extending-http-provider/" rel="nofollow noreferrer">http://www.adonespitogo.com/articles/angular-2-extending-http-provider/</a></p>
  
  <p>But this also does not work. Here I get no error, but nothing is different. I get no output to console as I expect from the code.</p>
  
  <p>I also tried to just add <code>HttpService</code> as it is in the providers array, still got that error.</p>