title: Angular4 and Swagger Client
body: <p>maybe someone can help. I try to use the default service in my component for communicat with REST API to a backend python-Server. I try to used the swagger-codegen generated ng2 Client in angular. The Python server is also generated by swagger. The server is working,</p>
  
  <pre><code>import { Inject, Injectable, Optional } from '@angular/core';
  import { Http, Headers, URLSearchParams } from '@angular/http';
  import { RequestMethod, RequestOptions, RequestOptionsArgs } from '@angular/http';
  import { Response, ResponseContentType } from '@angular/http';
  
  import { Observable } from 'rxjs/Observable';
  import '../rxjs-operators';
  
  import { InlineResponseDefault } from '../model/inlineResponseDefault';
  
  import { BASE_PATH, COLLECTION_FORMATS } from '../variables';
  import { Configuration } from '../configuration';
  import { CustomQueryEncoderHelper } from '../encoder';
  
  
  @Injectable()
  export class DefaultService {
  
      protected basePath = 'http://127.0.0.1:8080/v1';
      public defaultHeaders = new Headers();
      public configuration = new Configuration();
  
      constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
          if (basePath) {
              this.basePath = basePath;
          }
          if (configuration) {
              this.configuration = configuration;
              this.basePath = basePath || configuration.basePath || this.basePath;
          }
      }
  
      /**
       * @param consumes string[] mime-types
       * @return true: consumes contains 'multipart/form-data', false: otherwise
       */
      private canConsumeForm(consumes: string[]): boolean {
          const form = 'multipart/form-data';
          for (let consume of consumes) {
              if (form === consume) {
                  return true;
              }
          }
          return false;
      }
  
  
      public isJsonMime(mime: string): boolean {
          const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
          return mime != null &amp;&amp; (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
      }
  
      /**
       * Abort the programm in the project identified by UUID
       * @param UUID The UUID
       */
      public abortProject(UUID: string, extraHttpRequestParams?: RequestOptionsArgs): Observable&lt;{}&gt; {
          return this.abortProjectWithHttpInfo(UUID, extraHttpRequestParams)
              .map((response: Response) =&gt; {
                  if (response.status === 204) {
                      return undefined;
                  } else {
                      return response.json() || {};
                  }
              });
      }
  
      /**
       * delete a single file at a specified path
       * @param UUID The UUID
       * @param path The path where to upload.
       */
      public deleteFile(UUID: string, path: string, extraHttpRequestParams?: RequestOptionsArgs): Observable&lt;{}&gt; {
          return this.deleteFileWithHttpInfo(UUID, path, extraHttpRequestParams)
              .map((response: Response) =&gt; {
                  if (response.status === 204) {
                      return undefined;
                  } else {
                      return response.json() || {};
                  }
              });
      }
  
      /**
       * Testing the connection
       */
      public ping(extraHttpRequestParams?: RequestOptionsArgs): Observable&lt;string&gt; {
          return this.pingWithHttpInfo(extraHttpRequestParams)
              .map((response: Response) =&gt; {
                  if (response.status === 204) {
                      return undefined;
                  } else {
                      return response.json() || {};
                  }
              });
      }
  </code></pre>
  
  <p>My app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  import { AppComponent } from './app.component';
  import { DefaultService } from './rest/api/default.service';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule
    ],
    providers: [DefaultService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <p>I've try to inject the default.service in my contsructor and after it the browser give message ERROR NO PROVIDER FOR HTTP Injection error .....
  I'm totally newbie in ng and ts :-( . After it i define a function getPing for a console log the answer of the server.  </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { InlineResponseDefault } from '../app/rest';
  import { HttpClient, } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import { Response } from '@angular/http';
  import { DefaultService } from './rest/api/default.service';
  import { HttpClientModule } from '@angular/common/http';
  
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  
  export class AppComponent {
    title = 'app';
  
  
    constructor(private defaultService: DefaultService, public http: HttpClient) {
  
    }
  
    getPing() {
      console.log(this.defaultService.ping);
        }
  
  }
  </code></pre>