angular-httpclient – Tarik Billa

Parse date with Angular 4.3 HttpClient

December 21, 2023 by Tarik

This works for me: import { Injectable } from ‘@angular/core’; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse, HttpResponse } from ‘@angular/common/http’; import { Observable } from ‘rxjs/Observable’; @Injectable() export class ApiInterceptor implements HttpInterceptor { private dateRegex = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)$/; private utcDateRegex = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/; constructor() { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(request) .pipe( tap((event: … Read more

Angular HttpClient return expecting observable

December 10, 2023 by Tarik

Typecast your httpOptions private httpOptions: { headers: HttpHeaders }; The typescript compiler is pulling the wrong get method type (src) /** * Construct a GET request which interprets the body as JSON and returns the full event stream. * * @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`. … Read more

How to catch error in Observable.forkJoin(…)?

December 10, 2023 by Tarik

You may catch the error in each of your observables that are being passed to forkJoin: // Imports that support chaining of operators in older versions of RxJS import {Observable} from ‘rxjs/Observable’; import {forkJoin} from ‘rxjs/add/observable/forkJoin’; import {of} from ‘rxjs/add/observable/of’; import {map} from ‘rxjs/add/operator/map’; import {catch} from ‘rxjs/add/operator/catch’; // Code with chaining operators in older … Read more

How to handle unauthorized requests(status with 401 or 403) with new httpClient in angular 4.3

August 28, 2023 by Tarik

You should use your interceptor and just handle it like this: @Injectable() export class AuthInterceptor implements HttpInterceptor { constructor(private router: Router) { } private handleAuthError(err: HttpErrorResponse): Observable<any> { //handle your auth error or rethrow if (err.status === 401 || err.status === 403) { //navigate /delete cookies or whatever this.router.navigateByUrl(`/login`); // if you’ve caught / handled … Read more

Angular HttpClient Get method with body

August 2, 2023 by Tarik

As far as I can tell you cannot use HttpClient get to send a body. You could use the query at least for it to be idiomatic. (Or you can try to force the issue somehow). Lets say you have an array with your criteria: const criteria = [ {a: 25}, {b: 23} ]; http.get(url … Read more

Angular HttpClient missing response headers

July 16, 2023 by Tarik

CORS requests only expose 6 safelisted headers : Cache-Control Content-Language Content-Type Expires Last-Modified & Pragma. In order to access custom headers with a CORS request, the server has to explicitly whitelist them. This can be done by sending the response header: Access-Control-Expose-Headers For example: Access-Control-Expose-Headers: X-Total-Count, X-Paging-PageSize MDN Source

Angular HttpClient append headers to HttpHeaders [duplicate]

June 5, 2023 by Tarik

HttpHeaders.append returns a clone of the headers with the value appened, it does not update the object. You need to set the returned value to the headers. angular/packages/common/http/src/headers.ts append(name: string, value: string|string[]): HttpHeaders { return this.clone({name, value, op: ‘a’}); } So to append the headers you do this. let headers: HttpHeaders = new HttpHeaders(); headers … Read more

Property ‘json’ does not exist on type ‘Object’

May 24, 2023 by Tarik

For future visitors: In the new HttpClient (Angular 4.3+), the response object is JSON by default, so you don’t need to do response.json().data anymore. Just use response directly. Example (modified from the official documentation): import { HttpClient } from ‘@angular/common/http’; @Component(…) export class YourComponent implements OnInit { // Inject HttpClient into your component or service. … Read more

HTTPClient POST tries to parse a non-JSON response

May 11, 2023 by Tarik

You’ve put responseType: ‘text’ in the wrong section of your httpOptions – It should sit outside of headers, like so: private httpOptions = { headers: new HttpHeaders({ ‘Accept’: ‘text/html, application/xhtml+xml, */*’, ‘Content-Type’: ‘application/x-www-form-urlencoded’ }), responseType: ‘text’ }; With what you had before, a request header of responseType was being sent to the server, rather than … Read more

Angular (5) httpclient observe and responseType: ‘blob’

May 5, 2023 by Tarik

When using observe:response, don’t type the call (post<Blob>(…)), as the returned Observable will be of HttpResponse. So this should work: this.httpclient.post(‘MyBackendUrl’, params, {observe: ‘response’, responseType: ‘blob’} ); Why this happens, is there’s two versions of the post method, one with a generic type, one without: /** * Construct a POST request which interprets the body … Read more