title: Angular 2 RC 5 Bootstrap custom HTTP class TypeError: Cannot read property 'toString' of null
body: <p>In Angular 2 RC 4 I have a class HttpLoading which extends the original Http service of Angular 2.</p>
  
  <p>With RC 4 I was able to use that in bootstrap without any issue using the below code:</p>
  
  <pre><code>bootstrap(AppComponent, [
      HTTP_PROVIDERS,
      provide(RequestOptions, { useClass: DefaultRequestOptions }),
      provide(Http, {
          useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) =&gt; new HttpLoading(backend, defaultOptions),
          deps: [XHRBackend, RequestOptions]
      })
  ]).catch(err =&gt; console.error(err));
  </code></pre>
  
  <p><strong>My DefaultRequest Options class</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Headers, BaseRequestOptions } from '@angular/http';
  
  @Injectable()
  export class DefaultRequestOptions extends BaseRequestOptions {
      headers: Headers = new Headers({
          'Content-Type': 'application/json'
      });
  }
  </code></pre>
  
  <p><strong>My HttpLoading Class looks like this:</strong></p>
  
  <pre><code>import { Http, RequestOptionsArgs, ConnectionBackend, RequestOptions, Response } from '@angular/http'
  import { Injectable } from '@angular/core'
  import {GlobalService} from './globalService';
  import { Observable } from 'rxjs/Observable';
  
  export class HttpLoading extends Http {
  
      constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService) {
          super(backend, defaultOptions);
      }
  
      get(url: string, options?: RequestOptionsArgs): Observable&lt;any&gt; {
          this._globalService.isLoading = true;
          return super.get(url, options)
              .map(res =&gt; {
                  this._globalService.isLoading = false;
                  return res.json();
              })
              .catch(this.handleError);
      }
  }
  </code></pre>
  
  <p>With Angular 2 RC 5 the way bootstrap has been changed and we now need to have NgModule and bootstrap that. I have followed the migration guide and created my below NgModule:</p>
  
  <pre><code>import { NgModule }       from '@angular/core';
  import { BrowserModule  } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
  import { HttpModule }     from '@angular/http';
  import { Http, HTTP_PROVIDERS, RequestOptions, XHRBackend } from '@angular/http';
  
  import { DefaultRequestOptions } from './DefaultRequestOptions';
  import { HttpLoading } from './http-loading';
  
  import { routing }        from './app.routing';
  import { AppComponent } from './components/app.component';
  
  
  @NgModule({
      imports: [
          BrowserModule,
          FormsModule,
          ReactiveFormsModule,
          HttpModule,
          routing
      ],
      declarations: [
          AppComponent
      ],
      providers: [
          HTTP_PROVIDERS,
          { provide: RequestOptions, useClass: DefaultRequestOptions },
          {
              provide: Http,
              useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) =&gt; new HttpLoading(backend, defaultOptions, globalService),
              deps: [XHRBackend, RequestOptions, GlobalService]
          },
  GlobalService
      ],
      bootstrap: [AppComponent],
  })
  export class AppModule { }
  </code></pre>
  
  <p>But now when I use it in my Component, it doesn't sent any request to server and through below error in console:</p>
  
  <pre><code>EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'toString' of null
  </code></pre>
  
  <p><strong>My component in which I am using http is below:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http } from '@angular/http';
  
  @Component({
      templateUrl: '../../templates/home/home.html'
  })
  export class HomeComponent implements OnInit {
  
      constructor(private http: Http) {}
  
      ngOnInit() {
          this.http.get('/home')
              .subscribe((data) =&gt; {
  
              });
      }
  }
  </code></pre>
  
  <p>Can anyone please guide?</p>