api.service.ts

import { Injectable } from '@angular/core';
import { endpoints } from './endpoints';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from 'src/environments/environment';
 
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) { }
  public request(key, payload?) {
    const GetBaseURL = () => {
      let HTTP_PROTOCOL = environment.HTTP_PROTOCOL
      let HTTP_PORT = environment.HTTP_PORT
      let HTTP_HOST_NAME = environment.HTTP_HOST_NAME
      let API_VERSION = environment.API_VERSION
      return HTTP_PROTOCOL + '://' + HTTP_HOST_NAME + ':' + HTTP_PORT + '/' + API_VERSION
    }
    let header = new HttpHeaders();
    header = header.append('Content-Type', 'application/json');
    if (endpoints.request[key].hasOwnProperty('header')) {
      if (endpoints.request[key].header['ContentType']) {
        header = header.set('Content-Type', endpoints.request[key].header['ContentType']);
        if (endpoints.request[key].header['ContentType'] === 'application/x-www-form-urlencoded') {
          if (payload) {
            let form_data = new HttpParams({
              fromObject: payload
            });
            payload = form_data
          }
        }
      }
    }
    if (endpoints.request[key].hasOwnProperty('token') ? endpoints.request[key].token.is_needed : undefined) {
      header = header.append(
        'Authorization',
        Capitalize(endpoints.request[key].token.type) + ' ' +
        this.getToken(endpoints.request[key].token.type)
      )
    }
    if (endpoints.request[key].method == 'get') {
      if (!payload) payload = ''
      return this.http.get(GetBaseURL() + endpoints.request[key].url + payload, { headers: header })
    }
    if (endpoints.request[key].method == 'post') {
      return this.http.post(GetBaseURL() + endpoints.request[key].url, payload, { headers: header })
    }
    if (endpoints.request[key].method == 'put') {
      return this.http.put(GetBaseURL() + endpoints.request[key].url, payload, { headers: header })
    }
  }
  public setToken(data) {
    sessionStorage.setItem('access_token', data.access_token);
    sessionStorage.setItem('refresh_token', data.refresh_token);
  }
  public getToken(type = 'Bearer') {
    if (type === 'Bearer') {
      return sessionStorage.access_token
    } else if (type === 'Basic') {
      return environment.BASIC_TOKEN
    }
  }
  public deleteToken(data) {
    sessionStorage.removeItem('token');
  }
}
const Capitalize = (s?) => {
  if (typeof s !== 'string') return undefined
  s = s.toLowerCase()
  return s.charAt(0).toUpperCase() + s.slice(1)
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/shared/services/api.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 
  constructor(
    private api: ApiService // <<- Dependancy Injection
  ) { }
 
  ngOnInit(): void {
     this.api.request('GetAuthToken', payload).subscribe(
      (data) => {
       console.log(data);
      },
      (error) => {
        console.log(error);
      }
    )
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,  // <<- Added HttpClientModule Module
    AppRoutingModule,
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

endpoints.ts

import { environment } from 'src/environments/environment'
 
export const endpoints = {
    request: {
        GetAuthToken: {
            method: 'post',
            url: '/oauth/token',
            token: {
                is_needed: true,
                type: 'Basic'
            },
            header: {
                'ContentType': 'application/x-www-form-urlencoded'
            }
        },
        Register:{
            method: 'post',
            url: '/register',
            token: {
                is_needed: true,
                type: 'Basic'
            }
        }
    }
}

environment.ts

export const environment = {
  production: false,
  HTTP_PROTOCOL: 'http',
  HTTP_PORT: '8000',
  HTTP_HOST_NAME: 'localhost',
  API_VERSION: 'v1',
  BASIC_TOKEN: '<BASIC_TOKEN>'
};