title: Angular 6: Why can't I extend Services, without losing the functions of the ChildService?
body: <p>I was building a bunch of angular REST-services for my frontend. There for I thought it would be a nice idea to have a mother class <code>BaseRestService</code>, which implements all the equal stuff like headers and some helper functions.</p>
  
  <p>But when my child service extends the <code>BaseRestService</code>, I get <code>TypeErrors</code>, when I call some of the child functions. I tried debugging, and could see, that the child service is not of type <code>SomeExampleChildSerivce</code>, instead it is of type <code>BaseRestService</code>. Can someone explain this behavior or tell me what I am doing wrong?</p>
  
  <p>Below you can see the code of my <code>BaseRestService</code> and an <code>ChildService</code>:</p>
  
  <p>BaseRestService:</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export abstract class BaseRestService {
    headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': `JWT ${this.authService.getToken()}`
    });
  
    constructor(
      public httpClient: HttpClient,
      public logger: LoggingService,
      public authService: AuthenticationService,
    ) { }
  
    public refreshToken(): void {
      this.headers = new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': `${this.authService.getToken()}`
      });
    }
  }
  </code></pre>
  
  <p>ChildService:</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class DimensionService extends BaseRestService{
    private url: string = `${BASE_URL}/dimensions`;
  
    constructor(
      public httpClient: HttpClient,
      public logger: LoggingService,
      public authService: AuthenticationService,
    ){
      super(httpClient, logger, authService);
    }
  
    get(url: string): Observable&lt;DimensionAttribute&gt; {
      return this.httpClient.get&lt;DimensionAttribute&gt;(url, { headers: this.headers })
    }
  
    list(url?: string, page = 0, size = 20): Observable&lt;Page&lt;DimensionAttributeWrapper&gt;&gt; {
      if (!url) url = `${this.url}?page=${page}&amp;size=${size}`;
      return this.httpClient.get&lt;Page&lt;DimensionAttributeWrapper&gt;&gt;(url, { headers: this.headers })
    }
  }
  </code></pre>