ngx-http

Angular HTTP and connectivity package from Web Art Work.

ngx-http extracts the HTTP client wrapper and network monitoring features from the older all-in-one package into a focused Angular package.

License

MIT

Installation

npm i --save ngx-http

Usage

import { provideNgxHttp } from 'ngx-http';

export const appConfig = {
	providers: [
		provideNgxHttp({
			http: {
				url: 'https://api.example.com',
				headers: {
					'X-App': 'docs',
				},
			},
			network: {
				endpoints: ['https://api.example.com/ping'],
				intervalMs: 30000,
				timeoutMs: 2500,
				goodLatencyMs: 300,
				maxConsecutiveFails: 3,
			},
		}),
	],
};

provideNgxHttp() registers the package config token and Angular HttpClient with fetch support.

Available Features

| Name | Description | | --- | --- | | HttpService | Shared HTTP layer with base URL, persistent headers, callback compatibility, and observable APIs | | NetworkService | Signal-based connectivity status and latency checks | | provideNgxHttp | Environment provider for HTTP and network configuration | | HttpConfig, NetworkConfig, NetworkStatus, Config | Public configuration and typing helpers |

Http Service

HttpService wraps Angular HttpClient with shared URL/header management and supports both legacy callback usage and observable flows.

Configuration and headers

• setUrl(url: string)
• removeUrl()
• set(key: string, value: string | number | Array<string | number>)
• header(key: string)
• remove(key: string)

Requests

• post(url, doc, callback?, opts?)
• put(url, doc, callback?, opts?)
• patch(url, doc, callback?, opts?)
• delete(url, callback?, opts?)
• get(url, callback?, opts?)

Lock helpers

• clearLocked()
• lock()
• unlock()

Example:

import { HttpService } from 'ngx-http';

constructor(private httpService: HttpService) {}

ngOnInit() {
	this.httpService.setUrl('https://api.example.com');
	this.httpService.set('Authorization', 'Bearer token');
}

loadProfile() {
	this.httpService.get('/profile').subscribe(profile => {
		console.log(profile);
	});
}

Network Service

NetworkService monitors connectivity using Angular signals and periodic endpoint probes.

Public signals

• status: good | poor | none
• latencyMs: measured latency or null
• isOnline: browser online state as a signal

Methods

• recheckNow(): Promise<void>

Example:

import { NetworkService } from 'ngx-http';

constructor(private networkService: NetworkService) {}

async ngOnInit() {
	await this.networkService.recheckNow();
	console.log(this.networkService.status());
}

AGENTS.md

Copy this into your project AGENTS.md when using ngx-http:

- This project uses `ngx-http`, an Angular utility library for API calls and network monitoring.
- Prefer bootstrapping with `provideNgxHttp({...})` in application providers.
- Put shared API base URL, default headers, and network probe settings in `provideNgxHttp()` instead of scattering them across components.
- Prefer `HttpService` for API calls and shared header/base URL handling before introducing another app-specific wrapper.
- Prefer `NetworkService` for connectivity state and latency checks before adding duplicate online/offline utilities.
- Keep SSR-safe behavior intact. Do not add unguarded browser-only network logic when `ngx-http` already provides the needed abstraction.