How to make a sequence of http requests in Angular 6 using RxJS

For calls that depend on previous result you should use concatMap firstPOSTCallToAPI(‘url’, data).pipe( concatMap(result1 => secondPOSTCallToAPI(‘url’, result1)) concatMap( result2 => thirdPOSTCallToAPI(‘url’, result2)) concatMap(result3 => fourthPOSTCallToAPI(‘url’, result3)) …. ).subscribe( success => { /* display success msg */ }, errorData => { /* display error msg */ } ); if your async method does not depend on … Read more

Angular: How to download a file from HttpClient?

Blobs are returned with file type from backend. The following function will accept any file type and popup download window: downloadFile(route: string, filename: string = null): void{ const baseUrl=”http://myserver/index.php/api”; const token = ‘my JWT’; const headers = new HttpHeaders().set(‘authorization’,’Bearer ‘+token); this.http.get(baseUrl + route,{headers, responseType: ‘blob’ as ‘json’}).subscribe( (response: any) =>{ let dataType = response.type; let … Read more

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

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

Angular 6 Get response headers with httpclient issue

You need to observe the entire response as described below: createOrder(url) : Observable<HttpResponse<Object>>{ return this.http.get<HttpResponse<Object>>(this.url, {observe: ‘response’}).pipe( tap(resp => console.log(‘response’, resp)) ); } Now inside resp you can access headers An example createOrder(url) : Observable<HttpResponse<Object>>{ return this.http.get<HttpResponse<Object>>(this.url, {observe: ‘response’}).pipe( tap(resp => console.log(‘heaeder’, resp.headers.get(‘ReturnStatus’))) ); } If you can’t access your custom header as explained above … Read more

Angular 4.3 – HttpClient set params

Before 5.0.0-beta.6 let httpParams = new HttpParams(); Object.keys(data).forEach(function (key) { httpParams = httpParams.append(key, data[key]); }); Since 5.0.0-beta.6 Since 5.0.0-beta.6 (2017-09-03) they added new feature (accept object map for HttpClient headers & params) Going forward the object can be passed directly instead of HttpParams. getCountries(data: any) { // We don’t need any more these lines // … Read more

Angular HttpClient “Http failure during parsing”

You can specify that the data to be returned is not JSON using responseType. In your example, you can use a responseType string value of text, like this: return this.http.post( ‘http://10.0.1.19/login’, {email, password}, {responseType: ‘text’}) The full list of options for responseType is: json (the default) text arraybuffer blob See the docs for more information.

Difference between HttpModule and HttpClientModule

Use the HttpClient class from HttpClientModule if you’re using Angular 4.3.x and above: import { HttpClientModule } from ‘@angular/common/http’; @NgModule({ imports: [ BrowserModule, HttpClientModule ], … class MyService() { constructor(http: HttpClient) {…} It’s an upgraded version of http from @angular/http module with the following improvements: Interceptors allow middleware logic to be inserted into the pipeline … Read more