Why should you care?

All SPA data — accounts, orders, patients — flows through HttpClient with interceptors for auth tokens.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Injectable({ providedIn: 'root' })
export class TransferApi {
  private http = inject(HttpClient);

  create(dto: TransferDto): Observable<TransferResult> {
    return this.http.post<TransferResult>('/api/transfers', dto);
  }
}
// interceptor adds JWT
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthStore).accessToken();
  return next(token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req);
};

What happened?

• post types the response.
• Interceptor clones request and attaches Bearer token — every API call gets auth without repeating headers in services.

Practice next

1. Provide HttpClient with provideHttpClient(withInterceptors([authInterceptor])).
2. Create a service method returning Observable.
3. Use async pipe in template or subscribe in component.
4. Add retry interceptor for idempotent GET requests.
5. Configure proxy.conf.json for ng serve to /api.

Remember

HttpClient is Angular's REST client. Interceptors centralize auth and error handling. Type generics match Express JSON shapes.

Multi-tenant SaaS API

MeanVerse interceptor adds Authorization and X-Tenant-Id on every call.

Outcome: Feature services stay clean — cross-cutting headers live once.