This library help to send api request

Usage no npm install needed!

<script type="module">
  import apirequestUtils from 'https://cdn.skypack.dev/apirequest-utils';



This library help to send api request


Import bootstrap in your project angular in angular.json

  "styles": [

or in style.css

     @import "~bootstrap/dist/css/bootstrap.min.css";


npm install lib-module-modal lib-module-http




method api to send request

  export enum HttpMethod {


status http return by api (source java spring)

  export class HttpStatus {
      public static CONTINUE = new HttpStatus(100, 'Continue');
      public static SWITCHING_PROTOCOLS = new HttpStatus(101, 'Switching Protocols');
      public static PROCESSING = new HttpStatus(102, 'Processing');
      public static CHECKPOINT = new HttpStatus(103, 'Checkpoint');
      public static OK = new HttpStatus(200, 'OK');
      public static CREATED = new HttpStatus(201, 'Created');
      public static ACCEPTED = new HttpStatus(202, 'Accepted');
      public static NON_AUTHORITATIVE_INFORMATION = new HttpStatus(203, 'Non-Authoritative Information');
      public static NO_CONTENT = new HttpStatus(204, 'No Content');
      public static RESET_CONTENT = new HttpStatus(205, 'Reset Content');
      public static PARTIAL_CONTENT = new HttpStatus(206, 'Partial Content');
      public static MULTI_STATUS = new HttpStatus(207, 'Multi-Status');
      public static ALREADY_REPORTED = new HttpStatus(208, 'Already Reported');
      public static IM_USED = new HttpStatus(226, 'IM Used');
      public static MULTIPLE_CHOICES = new HttpStatus(300, 'Multiple Choices');
      public static MOVED_PERMANENTLY = new HttpStatus(301, 'Moved Permanently');
      public static FOUND = new HttpStatus(302, 'Found');
      public static SEE_OTHER = new HttpStatus(303, 'See Other');
      public static NOT_MODIFIED = new HttpStatus(304, 'Not Modified');
      public static TEMPORARY_REDIRECT = new HttpStatus(307, 'Temporary Redirect');
      public static PERMANENT_REDIRECT = new HttpStatus(308, 'Permanent Redirect');
      public static BAD_REQUEST = new HttpStatus(400, 'Bad Request');
      public static UNAUTHORIZED = new HttpStatus(401, 'Unauthorized');
      public static PAYMENT_REQUIRED = new HttpStatus(402, 'Payment Required');
      public static FORBIDDEN = new HttpStatus(403, 'Forbidden');
      public static NOT_FOUND = new HttpStatus(404, 'Not Found');
      public static METHOD_NOT_ALLOWED = new HttpStatus(405, 'Method Not Allowed');
      public static NOT_ACCEPTABLE = new HttpStatus(406, 'Not Acceptable');
      public static PROXY_AUTHENTICATION_REQUIRED = new HttpStatus(407, 'Proxy Authentication Required');
      public static REQUEST_TIMEOUT = new HttpStatus(408, 'Request Timeout');
      public static CONFLICT = new HttpStatus(409, 'Conflict');
      public static GONE = new HttpStatus(410, 'Gone');
      public static LENGTH_REQUIRED = new HttpStatus(411, 'Length Required');
      public static PRECONDITION_FAILED = new HttpStatus(412, 'Precondition Failed');
      public static PAYLOAD_TOO_LARGE = new HttpStatus(413, 'Payload Too Large');
      public static UNSUPPORTED_MEDIA_TYPE = new HttpStatus(415, 'Unsupported Media Type');
      public static REQUESTED_RANGE_NOT_SATISFIABLE = new HttpStatus(416, 'Requested range not satisfiable');
      public static EXPECTATION_FAILED = new HttpStatus(417, 'Expectation Failed');
      public static I_AM_A_TEAPOT = new HttpStatus(418, 'I\'m a teapot');
      public static UNPROCESSABLE_ENTITY = new HttpStatus(422, 'Unprocessable Entity');
      public static LOCKED = new HttpStatus(423, 'Locked');
      public static FAILED_DEPENDENCY = new HttpStatus(424, 'Failed Dependency');
      public static UPGRADE_REQUIRED = new HttpStatus(426, 'Upgrade Required');
      public static PRECONDITION_REQUIRED = new HttpStatus(428, 'Precondition Required');
      public static TOO_MANY_REQUESTS = new HttpStatus(429, 'Too Many Requests');
      public static REQUEST_HEADER_FIELDS_TOO_LARGE = new HttpStatus(431, 'Request Header Fields Too Large');
      public static UNAVAILABLE_FOR_LEGAL_REASONS = new HttpStatus(451, 'Unavailable For Legal Reasons');
      public static INTERNAL_SERVER_ERROR = new HttpStatus(500, 'Internal Server Error');
      public static NOT_IMPLEMENTED = new HttpStatus(501, 'Not Implemented');
      public static BAD_GATEWAY = new HttpStatus(502, 'Bad Gateway');
      public static SERVICE_UNAVAILABLE = new HttpStatus(503, 'Service Unavailable');
      public static GATEWAY_TIMEOUT = new HttpStatus(504, 'Gateway Timeout');
      public static HTTP_VERSION_NOT_SUPPORTED = new HttpStatus(505, 'HTTP Version not supported');
      public static VARIANT_ALSO_NEGOTIATES = new HttpStatus(506, 'Variant Also Negotiates');
      public static INSUFFICIENT_STORAGE = new HttpStatus(507, 'Insufficient Storage');
      public static LOOP_DETECTED = new HttpStatus(508, 'Loop Detected');
      public static BANDWIDTH_LIMIT_EXCEEDED = new HttpStatus(509, 'Bandwidth Limit Exceeded');
      public static NOT_EXTENDED = new HttpStatus(510, 'Not Extended');
      public static NETWORK_AUTHENTICATION_REQUIRED = new HttpStatus(511, 'Network Authentication Required');
      public static SERVER_NOT_START = new HttpStatus(0, 'the server is not starting');


this object is config api to use by HttpService
    - add body
    - method to send request
    - function success, error, finally
    - sendModalDefault is config to enable httpErrorModal
    - modalSend controller of modal enable while request send
export class HttpConfig {
  private Parameters: HttpParams = new HttpParams();
  public body?: string;
  public success?: (controller: any, value: any, router: Router) => void;
  public fail?: (controller: any, reason: HttpErrorResponse, router: Router) => void;
  public always?: (controller: any, router: Router) => void;
  public modalDefaultEnable: boolean;
  public modalSend: ModalController = undefined;

  constructor(public readonly method: HttpMethod,
              public readonly apis: HttpApis,
              private Url: string,
              pathParameter: any[] = []) {
    this.Url = StringUtils.concatWord('/', pathParameter);
    this.modalDefaultEnable = true;

  addParameter(key: string, value: string): HttpConfig {
    this.Parameters = this.Parameters.append(key, value);
    return this;

  addPathParameter(...pathParameter: any[]) {
    this.Url = StringUtils.concatWord('/', pathParameter);

  get parameters(): HttpParams {
    return this.Parameters;

  get url(): string {
    return this.Url;


stock method api and url call

export class HttpApi {
  public readonly url: string = '';

  constructor(public method: HttpMethod,
              ...url: string[]) {
    this.url = StringUtils.concatWord('/', url);


stock all subApi request (GET,POST,...) concern one api and create HttpConfig

export class HttpApis {
  private apis = new Map();
  public header: HttpHeaders;
  constructor(private startUrlApi: string,
              private headers: HttpHeaders) {

  append(nameApi: string, api: HttpApi, addNameApi: boolean = true): HttpApis {
    this.apis.set(nameApi, {api: api, addNameApi: addNameApi});
    return this;

  config(nameApi: string, ...pathParameter: any[]): HttpConfig | undefined {
    const apisConfig: {api: HttpApi, addNameApi: boolean} = this.apis.get(nameApi);
    if (apisConfig) {
      if(apisConfig.addNameApi) {
      return new HttpConfig(apisConfig.api.method, this, this.startUrlApi, pathParameter);
    return undefined;

  reset() {
    this.header = new HttpHeaders();
    for (const keyHeader of this.headers.keys()) {
      this.header.append(keyHeader, this.headers.get(keyHeader));



principal method to send request

public send<Response>(request: HttpRequest, actionResponse?: HttpActionResponse<Response>, body?: any, isEmitLoad: boolean = true) {


import project dans le app.module.ts

imports: [

use ApiGroup

import {ApiGroup} from './api-group';

new ApiGroup('api', 'http', 'localhost', 8080, {
    header: new HttpHeaders({
    'Access-Control-Allow-Credentials': 'true',
}, true)
  .append('nameApi', HttpMethod.GET) // send http://localhost:8080/api/nameApi
  .append('test', HttpMethod.PUT)
  .append('launch', HttpMethod.POST, false) // send http://localhost:8080/api
  .append('methodPut', HttpMethod.PUT, false)

Best practice for ApiGroup implement

put ApiGroup in file environment.ts

import {ApiGroup} from './api-group';

const apiUrl = 'http://localhost:8080/';
const apiGameHeader = new HttpHeaders({
  'Access-Control-Allow-Credentials': 'true',
const api = new ApiGroup('api', 'http', 'localhost', 8080, {
    header: apiHeader
}, true)
  .append('nameApi', HttpMethod.GET) // send http://localhost:8080/api/nameApi
  .append('test', HttpMethod.PUT)
  .append('launch', HttpMethod.POST, false) // send http://localhost:8080/api
  .append('methodPut', HttpMethod.PUT, false)

export const environment = {
  production: true,
  apis: {
    api: api

In container use HttpApis and HttpService

export class Component implements OnInit {
  private environment = environment;
  public launchStatus: boolean;

  constructor(private httpService: HttpService,
              private router: Router) {

  get clickTest() {
    const apiTest = this.environment.apis.api.getHttpRequest('test')
    this.httpService.send(apiTest, {
        success: data => alert('success'),
        error: reason => alert(JSON.stringify(reason)),
        complete: () => alert('complete')

  public clickLaunch(body: body) {
     const apiLaunch = this.environment.apis.api.config('launch')
     this.httpService.send(apiTest, {
         success: data => this.launchStatus = true
     }, body);