Angular global HttpClient - unable to use class (model)

Question

I have this api global service for http request:

network.service:

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';

import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class NetworkService {
  constructor(
    private http: HttpClient
  ) { }

  private formatErrors(error: any) {
    return throwError(error.error);
  }

  get(environment: string, path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment}${path}`, { params })
      .pipe(catchError(this.formatErrors));
  }

  put(environment: string, path: string, body: object = {}): Observable<any> {
    return this.http.put(
      `${environment}${path}`,
      JSON.stringify(body)
    ).pipe(catchError(this.formatErrors));
  }

  post(environment: string, path: string, body: object = {}): Observable<any> {
    return this.http.post(
      `${environment}${path}`,
      JSON.stringify(body)
    ).pipe(catchError(this.formatErrors));
  }

  delete(environment: string, path: string): Observable<any> {
    return this.http.delete(
      `${environment}${path}`
    ).pipe(catchError(this.formatErrors));
  }
}

I try to make the function accept model when i call the service in other place like this:

import { NetworkService } from '@globalCore/services/network.service';
import { Flows } from '@modules/home/models/flows.model';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private REPORTS_API = 'reports';
  private USER_API = 'user';

  constructor(private network: NetworkService) {
    this.baseUrl = environment.apiUrl;
  }

  getFlows(userID: number) {
    return this.network.get<Flows>(this.baseUrl, `${this.REPORTS_API}/${this.USER_API}/${userID}`);
  }

But i get error on the model

Expected 0 type arguments, but got 1.ts(2558)

But if i put the model on the global newtwork.service its work but i need a way to do this in other places when i call to function from other places and not in the global. thanks

Answer 1

you need to type your functions as generics to do this, like so:

get<T>(environment: string, path: string, params: HttpParams = new HttpParams()): Observable<T>

Answer 2

Try like this

HttpClient.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { environment } from '../environments/environment';

@Injectable()
export class HttpClient {
  httpOptions: any;
  httpOptionsUpload: any;
  constructor(private http: HttpClient) { }
  checkToken() {
    this.httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
  }

  checkTokenUpload() {
    this.httpOptionsUpload = {
      headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data',
      })
    };
  }
  get(url: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    this.checkToken();
    return this.http.get(url, this.httpOptions);
  }

  post(url: string, body: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    this.checkToken();
    return this.http.post(url, body, this.httpOptions);
  }

  put(url: string, body: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    this.checkToken();
    return this.http.put(url, body, this.httpOptions);
  }

  delete(url: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    this.checkToken();
    return this.http.delete(url, this.httpOptions);
  }
  upload(url: string, body: string, options?: any): Observable<any> {
    url = this.updateUrl(url);
    this.checkTokenUpload();
    return this.http.post(url, body, this.httpOptionsUpload);
  }

  private updateUrl(req: string) {
    return environment.host + req;
  }
}

app.service.ts

import {Injectable} from '@angular/core';
import { HttpClient} from 'HttpClient';

@Injectable({
    providedIn: 'root'
})

export class AppService {
    private employees = 'employees';
    constructor(private http: HttpClient) {

    }
    getData(body) {
        return this.http.get(this.employees);
    }
}

app.component.ts

import { Component } from '@angular/core';
import {AppService} from './app.service';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  employees: Array<any> = [];
  constructor(private appService: AppService) {
    this.getEmployees();
  }

getEmployees() {
  this.appService.getData().subscribe((response:any)=> {
      // console.log(response);
      this.employees = response;
    })
}
}

Here is working stackblitz