← Back to Articles         
Configure provideHttpClient()

Configure provideHttpClient()

Published on 01 Oct 2026     7 min read Angular
HTTP & Web API Integration

How Is provideHttpClient() Configured in Standalone Angular?

1. What is provideHttpClient()?

provideHttpClient() is the modern standalone Angular API used to configure Angular's HttpClient service.

It makes HttpClient available through Angular's Dependency Injection (DI) system without requiring HttpClientModule.

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

The basic configuration is:

providers: [
  provideHttpClient()
]

Then services can inject:

private http = inject(HttpClient);

and make requests:

this.http.get<Product[]>(url);

The overall flow is:

provideHttpClient()
        ↓
Registers HTTP providers
        ↓
Angular Dependency Injection
        ↓
HttpClient available
        ↓
ProductService
        ↓
ASP.NET Core Web API

2. Full Simple Sample Program

Suppose the ASP.NET Core API is:

GET https://localhost:7001/api/products

A typical standalone Angular application could contain:

src/
│
├── app/
│   ├── app.ts
│   ├── app.html
│   ├── app.config.ts
│   ├── product.ts
│   ├── product.service.ts
│   └── products.ts
│
└── main.ts

app.config.ts

This is where provideHttpClient() is commonly configured.

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {

  providers: [
    provideHttpClient()
  ]

};

main.ts

import { bootstrapApplication } from '@angular/platform-browser';

import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig)
  .catch(err => console.error(err));

product.ts

export interface Product {
  id: number;
  name: string;
  price: number;
}

product.service.ts

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

import { Product } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private http = inject(HttpClient);

  private apiUrl =
    'https://localhost:7001/api/products';

  getProducts(): Observable<Product[]> {

    return this.http.get<Product[]>(
      this.apiUrl
    );

  }
}

products.ts

import { Component, inject, OnInit } from '@angular/core';

import { Product } from './product';
import { ProductService } from './product.service';

@Component({
  selector: 'app-products',
  standalone: true,
  template: `
    <h2>Products</h2>

    @for (product of products; track product.id) {

      <div>
        {{ product.name }}
        -
        ₹{{ product.price }}
      </div>

    }
  `
})
export class Products implements OnInit {

  private productService = inject(ProductService);

  products: Product[] = [];

  ngOnInit(): void {

    this.productService
      .getProducts()
      .subscribe({
        next: (data) => {
          this.products = data;
        },

        error: (error) => {
          console.error(
            'Error loading products:',
            error
          );
        }
      });

  }
}

app.ts

import { Component } from '@angular/core';
import { Products } from './products';

@Component({
  selector: 'app-root',
  standalone: true,

  imports: [
    Products
  ],

  templateUrl: './app.html'
})
export class App {
}

app.html

<h1>Product Application</h1>

<app-products></app-products>

3. How Does provideHttpClient() Work?

The most important configuration is:

provideHttpClient()

inside:

providers: [
  provideHttpClient()
]

When Angular starts, it processes these application-level providers.

Conceptually:

main.ts
   ↓
bootstrapApplication()
   ↓
appConfig
   ↓
providers[]
   ↓
provideHttpClient()
   ↓
HTTP services registered with DI
   ↓
HttpClient available

Now this becomes possible:

private http = inject(HttpClient);

4. Understanding app.config.ts

Consider:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]
};

There are three important parts.

ApplicationConfig

ApplicationConfig

represents application-level configuration for a standalone Angular application.

providers

providers: [
]

registers services and framework capabilities with Angular's dependency-injection system.

provideHttpClient()

provideHttpClient()

registers the providers necessary for Angular's HTTP client.

Therefore:

ApplicationConfig
      ↓
providers
      ↓
provideHttpClient()
      ↓
HttpClient

5. How Is HttpClient Used After Configuration?

Once this is configured:

provideHttpClient()

you can inject HttpClient.

Modern inject() approach

private http = inject(HttpClient);

For example:

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private http = inject(HttpClient);

}

You can then call:

this.http.get(...)
this.http.post(...)
this.http.put(...)
this.http.delete(...)

6. Constructor Injection Also Works

Using standalone Angular does not mean constructor injection stops working.

This is perfectly valid:

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http: HttpClient) {
  }

}

So both are possible:

Constructor injection

constructor(private http: HttpClient) {
}

inject() function

private http = inject(HttpClient);

provideHttpClient() is about configuring/providing HTTP functionality. It does not force you to use a particular injection syntax.

7. provideHttpClient() vs HttpClient

Do not confuse these two.

provideHttpClient()

Used for configuration.

providers: [
  provideHttpClient()
]

Its job is essentially:

"Make Angular HTTP functionality available
to the application's DI system."

HttpClient

Used for making HTTP requests.

private http = inject(HttpClient);

Then:

this.http.get(...)

So:

provideHttpClient()
       ↓
CONFIGURES

HttpClient
       ↓
USED TO MAKE HTTP REQUESTS

8. provideHttpClient() vs Old HttpClientModule

This is an important interview question.

Before Standalone

We had:

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

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {
}

Flow:

AppModule
    ↓
imports[]
    ↓
HttpClientModule
    ↓
HttpClient

Standalone Angular

Now:

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

export const appConfig: ApplicationConfig = {

  providers: [
    provideHttpClient()
  ]

};

Flow:

ApplicationConfig
       ↓
providers[]
       ↓
provideHttpClient()
       ↓
HttpClient

9. Old vs Modern Comparison

Before Standalone Standalone Angular
AppModule ApplicationConfig
HttpClientModule provideHttpClient()
imports[] providers[]
NgModule-based Provider-function based
bootstrapModule() bootstrapApplication()

Easy way to remember:

OLD

AppModule
   ↓
imports
   ↓
HttpClientModule


MODERN

app.config.ts
   ↓
providers
   ↓
provideHttpClient()

10. Can We Configure It Directly in main.ts?

Yes.

You may encounter standalone applications configured like this:

import { bootstrapApplication }
  from '@angular/platform-browser';

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

import { App } from './app/app';

bootstrapApplication(App, {

  providers: [
    provideHttpClient()
  ]

})
.catch(err => console.error(err));

This is valid.

However, when an application has several providers, keeping them in:

app.config.ts

usually provides cleaner organization.

For example:

export const appConfig: ApplicationConfig = {

  providers: [

    provideRouter(routes),

    provideHttpClient()

  ]

};

11. Configuring HTTP Interceptors

provideHttpClient() can also be configured with features.

For example, suppose you have a functional JWT interceptor:

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

export const authInterceptor: HttpInterceptorFn =
  (req, next) => {

    const token = 'sample-token';

    const newRequest = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`
      }
    });

    return next(newRequest);
  };

Configure it:

import {
  provideHttpClient,
  withInterceptors
} from '@angular/common/http';

import {
  authInterceptor
} from './auth.interceptor';

export const appConfig: ApplicationConfig = {

  providers: [

    provideHttpClient(
      withInterceptors([
        authInterceptor
      ])
    )

  ]

};

Now the flow becomes:

ProductService
      ↓
HttpClient
      ↓
authInterceptor
      ↓
Add JWT
      ↓
HTTP Request
      ↓
ASP.NET Core Web API

The request could contain:

Authorization: Bearer <token>

This is one reason provideHttpClient() is more than simply a replacement spelling for the old module import—it supports feature-based HTTP configuration.

12. Complete Angular → ASP.NET Core Flow

Using our example:

this.productService.getProducts()

calls:

return this.http.get<Product[]>(
  this.apiUrl
);

The complete flow is:

Angular starts
      ↓
bootstrapApplication()
      ↓
appConfig
      ↓
provideHttpClient()
      ↓
HttpClient registered
      ↓
ProductService
      ↓
inject(HttpClient)
      ↓
http.get<Product[]>()
      ↓
HTTP GET
      ↓
ASP.NET Core Web API
      ↓
GET /api/products
      ↓
JSON Response
      ↓
Observable<Product[]>
      ↓
subscribe()
      ↓
Angular Component
      ↓
HTML

13. Very Important Distinction

These three terms are related but have different responsibilities:

Term Purpose
provideHttpClient() Configures/provides Angular HTTP services
HttpClient Makes HTTP requests
HttpClientModule Older NgModule-based HTTP configuration

Think:

Modern configuration
        ↓
provideHttpClient()
        ↓
HttpClient
        ↓
get()
post()
put()
delete()

Whereas older Angular used:

Old configuration
        ↓
HttpClientModule
        ↓
HttpClient
        ↓
get()
post()
put()
delete()

Key Points

  • provideHttpClient() is the modern standalone API for configuring Angular HTTP functionality.
  • Import it from:
@angular/common/http
  • It is commonly configured in app.config.ts.
  • Add it to application-level providers:
providers: [
  provideHttpClient()
]
  • It makes HttpClient available through Angular's DI system.
  • You can inject HttpClient using:
private http = inject(HttpClient);

or constructor injection:

constructor(private http: HttpClient) {}
  • provideHttpClient() replaces the traditional application-level use of HttpClientModule for modern standalone configuration.
  • It supports additional HTTP features such as interceptors.
  • provideHttpClient() configures HTTP functionality; HttpClient makes HTTP requests.

Interview Questions and Answers

1. What is provideHttpClient()?

provideHttpClient() is Angular's standalone provider API for configuring HttpClient and its supporting HTTP services in Angular's dependency-injection system.

2. Where is provideHttpClient() configured?

Commonly in:

app.config.ts

inside:

providers: [
  provideHttpClient()
]

3. From where is provideHttpClient() imported?

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

4. What did standalone Angular use instead of HttpClientModule?

Modern standalone configuration uses:

provideHttpClient()

instead of importing HttpClientModule into an AppModule.

5. Does provideHttpClient() make HTTP requests?

No.

It configures/provides HTTP services.

HttpClient actually makes requests:

this.http.get(...)

6. How do you inject HttpClient?

Modern style:

private http = inject(HttpClient);

Constructor injection also works:

constructor(private http: HttpClient) {}

7. Can provideHttpClient() configure interceptors?

Yes.

For example:

provideHttpClient(
  withInterceptors([
    authInterceptor
  ])
)

8. Can provideHttpClient() be configured directly in main.ts?

Yes.

bootstrapApplication(App, {
  providers: [
    provideHttpClient()
  ]
});

For larger applications, app.config.ts is commonly used to keep application configuration organized.

Best Short Interview Answer

provideHttpClient() is the modern standalone Angular API used to register and configure HttpClient with Angular's dependency-injection system. It is typically added to the providers array in app.config.ts, replacing the traditional NgModule-based HttpClientModule configuration.

Keep Learning - More From This Category

← Back to Articles