Stop repeating HttpClient boilerplate in Angular

In modern Angular apps that communicate with a REST API, developers often encounter the same few lines of code in every service. These lines involve reading the base URL from the environment, building the headers, constructing the URL, and calling HttpClient. As applications expand and additional backends are introduced, these lines of code tend to multiply, leading to tedious repetition.

To address this issue, a small wrapper called @arxis/api was developed and released in version 3.0, specifically tailored for Angular 17 and above.

The primary problem with the current approach is the presence of repetitive plumbing code in each service method. For instance, in a UserService, the majority of the method is dedicated to users, while the rest consists of boilerplate code. This boilerplate includes configuring the API, setting headers, and constructing URLs.

To resolve this issue, developers can install the @arxis/api package and configure the base URL and headers once using the provideApi() function. By doing so, they can then inject the ApiService anywhere within their Angular app. This tiny wrapper provides a typed interface for Angular services, streamlining the process of making HTTP requests.

The @arxis/api package offers a set of typed methods for common HTTP operations such as get, post, put, patch, and delete. These methods accept query parameters as a plain object and provide overloads similar to HttpClient, including observe: response and observe: events. This allows developers to maintain the same dispatch of data and events as with HttpClient, while enjoying a more concise and maintainable codebase.

Furthermore, @arxis/api is built on top of Angular's HttpClient, meaning that existing functionalities like interceptors, withFetch(), server-side rendering, and HttpTestingController remain fully functional. For example, an auth token that may change during app runtime can be managed through an interceptor, ensuring that it applies to every ApiService request.

In summary, the @arxis/api library provides a solution to the repetitive boilerplate code issue in Angular services that interact with REST APIs. By configuring the API once and injecting the ApiService, developers can focus on defining their endpoints, resulting in cleaner, more maintainable code while preserving the functionality of Angular's HttpClient.