Angular Standalone : provideHttpClient()
January 27, 2024
HttpClient for injection in our Angular standalone application. We inject HttpClient in components or services to perform HTTP operations. In Angular standalone application, we need to provide HttpClient for dependency injection using provideHttpClient(). It provides HttpClient with default configurations. To add other configurations, we can pass feature functions to provideHttpClient().
Import
provideHttpClient() from @angular/common/http.
import { provideHttpClient } from '@angular/common/http';
provideHttpClient() in detail.
provideHttpClient()
provideHttpClient() configures HttpClient to be available for injection.
Find the function signature from Angular doc.
provideHttpClient(...features: HttpFeature<HttpFeatureKind>[]): EnvironmentProviders
provideHttpClient() to provide HttpClient globally.
app.config.ts
export const APP_CONFIG: ApplicationConfig = {
providers: [
provideHttpClient()
]
};
bootstrapApplication(AppComponent, APP_CONFIG) .catch((err) => console.error(err));
provideHttpClient() configures HttpClient with its default options for XSRF protection of outgoing requests. For other configuration options, we need to pass feature functions to provideHttpClient(). Feature functions are created by implementing HttpFeature.
Find the feature functions applied to
HttpClient provided by Angular.
withInterceptors : Adds functional style HTTP interceptors.
withInterceptorsFromDi : Adds class based HTTP interceptors.
withXsrfConfiguration : Adds XSRF protection customizations.
withNoXsrfProtection : Disable XSRF protection.
withJsonpSupport : Adds JSONP support.
withRequestsMadeViaParent : Enable current
HttpClient instance to make requests via the parent injector's HttpClient.
withFetch : Enables to make requests using the fetch API.
Features functions are used with
provideHttpClient() as below.
providers: [ provideHttpClient(withInterceptors(), withFetch()) ]
Using withInterceptorsFromDi()
Here we will learn to use class based HTTP interceptors withHttpClient.
Suppose we have a class based interceptor.
req-logging-interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular/common/http';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class RequestLoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
return next.handle(req).pipe(
tap({
next: event => {
if (event instanceof HttpResponse) {
console.log("Request succeeded: ")
}
},
error: () => console.log("Request failed")
})
);
}
}
HttpClient to perform HTTP operations.
book.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Book } from '../book';
@Injectable({
providedIn: 'root'
})
export class BookService {
constructor(private http: HttpClient) { }
findBookByTitle(query: string): Observable<Book[]> {
const httpParams = new HttpParams().set('name', query);
return this.http.get<Book[]>("/api/getBook", {
params: httpParams
});
}
}
provideHttpClient() with withInterceptorsFromDi() as below.
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
export const APP_CONFIG: ApplicationConfig = {
providers: [
provideHttpClient(withInterceptorsFromDi()),
[
{ provide: HTTP_INTERCEPTORS, useClass: RequestLoggingInterceptor, multi: true }
]
]
};
