Sharing API Services on Web and Mobile

api.base-service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Dashboard } from '~/app/models';

@Injectable({
  providedIn: 'root'
})

export abstract class ApiBaseService {
  public abstract apiURL: string;
  public abstract authorization: string;

  constructor(
    protected http: HttpClient
  ) { }

  getExpenseCounts(): Observable<Dashboard> {
    const params = new HttpParams()
    .append('isApprover', 'true');

    return this.http.get<Dashboard>(`${this.apiURL}/users/dashboard`, {
      params,
      headers: new HttpHeaders().set('Authorization', this.authorization)
    });
  }
}

api.service.tns.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { Subject } from 'rxjs';
import * as bghttp from 'nativescript-background-http';
import * as appSettings from 'tns-core-modules/application-settings';
import { ApiBaseService } from './api.base-service';

@Injectable({
  providedIn: 'root'
})
export class ApiService extends ApiBaseService {
  apiURL = environment.apiURL;

  constructor(
    protected http: HttpClient
  ) {
    super(http);
  }

  get authorization() {
    const token = appSettings.getString('accesstoken');
    const auth = token ? `Bearer ${token}` : null;
    return auth;
  }

  // TODO: modify to save image appropriately
  saveOneExpenseReceipt(image) {
    const session = bghttp.session('image-upload');
    const subject = new Subject<any>();
    const request = {
      url: `${this.apiURL}/expenses/receipt`,
      method: 'POST',
      headers: {
        'Content-Type' : 'application/octet-stream',
        'Authorization' : this.authorization
      },
      description: 'new receipt'
    };

    let task: bghttp.Task;
    const params = [
       { name: 'receipt', filename: image, mimeType: 'image/jpg' }
    ];

    task = session.multipartUpload(params, request);
    task.on('responded', (event: any) => {
      if (event.data && event.data.error) {
        subject.error(event.data);
      } else {
        subject.next(event.data);
      }
    });

    task.on('error', (e) => console.log('received ' + e.responseCode + 'code.'));

    return subject.asObservable();
  }
}

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { ApiBaseService } from './api.base-service';

@Injectable({
  providedIn: 'root'
})
export class ApiService extends ApiBaseService {
  apiURL = environment.apiURL;

  get authorization() {
    const token = document.cookie.match('(^|;) ?accesstoken=([^;]*)(;|$)');
    const auth = token ? `Bearer ${token[2]}` : null;
    return auth;
  }

  constructor(
    protected http: HttpClient,
  ) {
    super(http);
  }
}