Angular Forkable HTTP Client

Common errors

• Error: NG0201: No provider for InjectionToken MY_REST_API_HTTP_CLIENT!

  cause The `InjectionToken` for your forked `HttpClient` is not correctly provided in the Angular dependency injection system.
  fix Ensure your `InjectionToken` specifies `providedIn: 'root'` or that it is explicitly added to the `providers` array of an `@NgModule` where it needs to be available. Example: `new InjectionToken<ForkableHttpClient>(..., { providedIn: 'root', factory: ... });`

• TypeError: httpClient.fork is not a function

  cause You are attempting to call `fork()` on Angular's native `HttpClient` instead of the extended `ForkableHttpClient` provided by this library.
  fix Ensure you are injecting `ForkableHttpClient` from `ngx-forkable-http-client` and not `HttpClient` from `@angular/common/http` when you intend to use the forking functionality. Update your import and injection site.

• Argument of type 'typeof MyInterceptor' is not assignable to parameter of type 'HttpInterceptor'.

  cause The class provided to `httpClient().with()` or `ForkableHttpClient.fork()` does not correctly implement the `HttpInterceptor` interface, or it's not marked as `@Injectable()`.
  fix Verify that your interceptor class has an `intercept` method with the correct signature (`intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>`) and is decorated with `@Injectable()`.

Warnings

• breaking Major versions of `ngx-forkable-http-client` are tightly coupled to specific Angular versions. Version 4.x.x requires Angular >=13.0.0. Using an incompatible library version will lead to build errors or runtime failures.
  Fix: Consult the compatibility matrix in the package documentation and install the `ngx-forkable-http-client` version matching your Angular project's major version. For Angular 13+, use `npm install ngx-forkable-http-client@^4.0.0`.
• gotcha When defining a forked HTTP client, ensure you use the `httpClient().with(...)` factory pattern. Simply injecting `ForkableHttpClient` without this factory setup will not apply the intended non-global interceptors to that specific instance.
  Fix: Always use the `httpClient()` factory within your `InjectionToken`'s `factory` function to specify interceptors, for example: `factory: () => httpClient().with(MyInterceptor)`.
• gotcha Misunderstanding the 'fork' concept can lead to confusion with `rxjs.forkJoin`. This library's 'fork' refers to creating a new `HttpClient` instance that inherits from a parent but can have additional interceptors. It does not relate to concurrent Observable execution.
  Fix: Remember that `ForkableHttpClient.fork()` is for creating a new, customized `HttpClient` instance with its own interceptor chain, while `rxjs.forkJoin` is for combining multiple Observables to emit values when all complete.

Install

• npm install ngx-forkable-http-client npm
• yarn add ngx-forkable-http-client yarn
• pnpm add ngx-forkable-http-client pnpm

Imports

• ForkableHttpClient
  wrong:

  import { HttpClient as ForkableHttpClient } from '@angular/common/http';

  correct:

  import { ForkableHttpClient } from 'ngx-forkable-http-client';

  This is the extended HttpClient class you should inject and use for forking. Do not confuse it with Angular's native HttpClient.
• httpClient
  wrong:

  import { httpClient } from '@angular/common/http';

  correct:

  import { httpClient } from 'ngx-forkable-http-client';

  This is a utility factory function used to define ForkableHttpClient instances with specific interceptors within InjectionToken factories. It is not a class.
• InjectionToken

  import { InjectionToken } from '@angular/core';

  While part of Angular core, it's crucial for defining and providing named instances of ForkableHttpClient.

Quickstart

Demonstrates how to define and configure multiple `ForkableHttpClient` instances using `InjectionToken` and the `httpClient` factory, each with its own specific `HttpInterceptor`s, making them root-provided. This sets up distinct HTTP clients for different API needs.

import { InjectionToken, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ForkableHttpClient, httpClient } from 'ngx-forkable-http-client';

// Dummy Interceptors for demonstration
@Injectable()
export class MyAuthenticationHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Auth Interceptor: ', req.url);
    const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${process.env.AUTH_TOKEN ?? 'my-secret-token'}` } });
    return next.handle(authReq);
  }
}

@Injectable()
export class LoggingHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Logging Interceptor: ', req.method, req.url);
    return next.handle(req);
  }
}

@Injectable()
export class ErrorHandlerHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Error Handler Interceptor: ', req.url);
    return next.handle(req);
  }
}

@Injectable()
export class AnotherHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Another Interceptor: ', req.url);
    return next.handle(req);
  }
}

export const MY_REST_API_HTTP_CLIENT =
  new InjectionToken<ForkableHttpClient>('MY_REST_API_HTTP_CLIENT', {
    providedIn: 'root',
    factory: () => httpClient().with(MyAuthenticationHttpInterceptor, LoggingHttpInterceptor)
  });

export const EXTERNAL_API_X_HTTP_CLIENT =
  new InjectionToken<ForkableHttpClient>('EXTERNAL_API_X_HTTP_CLIENT', {
    providedIn: 'root',
    factory: () => httpClient().with(ErrorHandlerHttpInterceptor)
  });

export const EXTERNAL_API_Y_HTTP_CLIENT =
  new InjectionToken<ForkableHttpClient>('EXTERNAL_API_Y_HTTP_CLIENT', {
    providedIn: 'root',
    factory: () => httpClient().with(AnotherHttpInterceptor)
  });

// Example of how to use in a component or service:
// @Component({...})
// export class MyService {
//   constructor(@Inject(MY_REST_API_HTTP_CLIENT) private myApiClient: ForkableHttpClient) {
//     this.myApiClient.get('/data').subscribe(res => console.log(res));
//   }
// }