title: Angular 2/5. Service with HttpClient makes mistake and doesn't works
body: <p>I'm trying to make service which takes (trying to take) XML-file from remote server. I haven't enough experience to find mistakes by myself. Relevant code of <code>app.component.ts</code>:</p>
  
  <pre><code>import { Component, OnInit, AfterViewInit, ElementRef, ViewChild, Renderer2 } from '@angular/core';
  import { CanvasSettings } from './canvas-settings';
  import { Rate } from './rate';
  import { RateService } from './rates.service';
  import { CBRRateService } from './cbrrates.service';
  import { DatePoints, Year, Month, Day, Monthes, ofMonth } from './dates';
  import { HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
  
  @Component({ // line 9, there is an error
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers: [ RateService, CBRRateService, HttpClient, HttpHandler, HttpClientModule ]
  })
  
  export class AppComponent implements OnInit, AfterViewInit {
  
      @ViewChild("helper") helper: ElementRef;
  
      //...
      rates: Rate[];
      cbrrates: any;
      //...
  
      constructor(private _rateService: RateService, private _rateCBRService: CBRRateService) {}
  
      ngOnInit() {
  
          //...
  
      }
  
      getCBRRates():void { // Uses http. Doesn't work.
  
          this._rateCBRService.getCBRRates().subscribe(cbrrates =&gt; {this.cbrrates = cbrrates});
  
      }
      getRates():void { // Doesn't use http, works fine
  
          this._rateService.getRates().subscribe(rates =&gt; this.rates = rates);
  
      }
  
      //...
  
  }
  </code></pre>
  
  <p>And code listing of <code>cbrrates.service.ts</code>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { HttpClient, HttpHandler, HttpClientModule, HttpHeaders } from '@angular/common/http';
  import { of } from 'rxjs/observable/of'; // It used in earlier version, now it useless
  
  const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'plain/text' }) // I've found no way to get XML, so 'plain/text'. Everywhere JSON.
  };
  
  @Injectable()
  export class CBRRateService {
  
      targetURL: string = "http://www.cbr.ru/scripts/XML_dynamic.asp?date_req1=01/01/2016&amp;date_req2=02/02/2018&amp;VAL_NM_RQ=R01235";
  
      constructor(private http: HttpClient){}
  
      getCBRRates(): Observable&lt;any&gt; {
          return (this.http.get(this.targetURL, {responseType: 'text'}));
      }
  
  }
  </code></pre>
  
  <p>Error in bash console:</p>
  
  <pre><code> ERROR in src/app/app.component.ts(9,12): error TS2345:
   Argument of type '{ selector: string; templateUrl: string;
   styleUrls: string[]; providers: (typeof HttpHandler | ty...' is not
   assignable to parameter of type 'Component'.
  
     Types of property 'providers' are incompatible.
  
       Type '(typeof HttpHandler | typeof HttpClient | typeof HttpClientModule
   | typeof CBRRateService)[]' is not assignable to type 'Provider[]'.
  
         Type 'typeof HttpHandler | typeof HttpClient | typeof HttpClientModule
   | typeof CBRRateService' is not assignable to type 'Provider'.
  
           Type 'typeof HttpHandler' is not assignable to type 'Provider'.
  
             Type 'typeof HttpHandler' is not assignable to type 'ClassProvider'.
  
               Property 'provide' is missing in type 'typeof HttpHandler'.
  </code></pre>
  
  <p>Error in browser console:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 404 (Not Found)
  </code></pre>
  
  <p>Total 2 questions:</p>
  
  <ol>
  <li><p>How to fix service <code>CBRRateService</code> and make it works?</p></li>
  <li><p>Does exist some way to get and parse XML-data via service which gets data from remote server?</p></li>
  </ol>