title: Angular "error TS2559: Type 'string' has no properties in common with type '{ headers?: HttpHeaders "
body: <p>I have the following code trying to make an angular app from the ng new template. I'm following this as a guide. <a href="https://malcoded.com/posts/angular-backend-express" rel="nofollow noreferrer">https://malcoded.com/posts/angular-backend-express</a></p>
  
  <p>When googling I found this on the typescript github as the cloest thing to my issue. <a href="https://github.com/Microsoft/TypeScript/issues/24835" rel="nofollow noreferrer">https://github.com/Microsoft/TypeScript/issues/24835</a> </p>
  
  <p>Also while making this question I came across this one but I don't think the solution written would solve my problem. <a href="https://stackoverflow.com/questions/51224476/error-ts2559-type-headers-has-no-properties-in-common-with-type-requestoptio">error TS2559: Type &#39;Headers&#39; has no properties in common with type &#39;RequestOptionsArgs&#39;</a> </p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { HttpClient } from '@angular/common/http';
  export interface Data {
  data: string;
  }
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
  
  @Injectable()
  export class AppComponent {
    constructor(private http: HttpClient) {}
    title = 'My Star Database';
  
    Character(name: string) 
    {
    }
    sendCharacter(name: string): Observable&lt;Data&gt; {
            return this.http.get&lt;Data&gt;('http://localhost:8000/api/character/', name);
                    }
                    getCharacterData(name: string): Observable&lt;Data&gt; {
                            var data =  this.http.get&lt;Data&gt;('http://localhost:8000/api/character/', name);
                            console.log(data);
                            }
  
    }
  </code></pre>
  
  <p><strong>error</strong> </p>
  
  <pre><code>ERROR in src/app/app.component.ts(24,71): error TS2559: Type 'string' has no properties in common with type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'.
  src/app/app.component.ts(26,37): error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.
  src/app/app.component.ts(27,78): error TS2559: Type 'string' has no properties in common with type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'.
  </code></pre>
  
  <p><strong>side note</strong>
  Also I'd like to add that in the code I added the export interface and changed  to  in the get request because I was getting an error over the get request having a string return type. This is my first experience writing in typescript and i have to say between that error (which I made go away) and the one you see above I don't feel typescript really deserves its name. I wish the angular devs stuck with javascript. Sorry for the rant I'm very frustrated over this language and I'm not new to programming. I love the three Cs and Python.</p>
  
  <p><strong>Update
  app.components.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { HttpClient } from '@angular/common/http';
  export interface Data {
  data: string;
  }
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
  
  export class AppComponent {
    constructor(private http: HttpClient) {}
    title = 'My Star Database';
  
    Character(name: string) 
    {
    }
    sendCharacter(name: string): Observable&lt;Data&gt; {
            return this.http.get&lt;Data&gt;('http://localhost:8000/api/character/?name='+ name);
                    }
                    getCharacterData(name: string): {
                             data =  this.http.get&lt;Data&gt;('http://localhost:8000/api/character/?name='+ name);
                            console.log(data);
                            }
  
    }
  </code></pre>
  
  <p><strong>error</strong> 
  ERROR in src/app/app.component.ts(27,7): error TS1131: Property or signature expected.
  src/app/app.component.ts(28,13): error TS1005: ';' expected.
  src/app/app.component.ts(31,3): error TS1128: Declaration or statement expected.</p>