Angular Httpclient not hitting backend API

Question

I have the following code to consume a back-end API served by a Play application. The API http://localhost:9000/ws/users/get works if I type it as is on the browser window (I see the response hello from get user controller on the window and also a debug print `get user request in my play application) but the Angular code doesn't seem to send anything to the backend (I don't see any debugs at all in either play or browser's window).

Question 1 - How could I debug where Angular is sending the message Question 2 - why isn't the code working?

import { Injectable } from '@angular/core';
import { environment } from 'environments/environment';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { HttpClient} from '@angular/common/http';
import {User} from "./user";

@Injectable()
export class WebToBackendInterfaceService {

  API_URL = environment.apiUrl; 
  ADD_USER_URL = environment.addUserUrl;
  GET_USER_URL = environment.getUserUrl;
  constructor(private http:HttpClient) { }

  public createUser(user:User):any{
    console.log('contacting server at '+this.API_URL +this.ADD_USER_URL +" with user data ",user); //if I click this link directly fro browser's debug window then I see response from the server
    this.http.post(this.API_URL +this.ADD_USER_URL,user)
      .map(response => { 
        console.log('response from backend service',response);
        return response;
      })
      .catch(this.handleError); //error handler if Observable fails
  }

  public getUser(id:string):any{
    console.log('contacting server at '+this.API_URL +this.GET_USER_URL +" with user data "+id);
    this.http.get(this.API_URL+this.GET_USER_URL)
      .map(response=>{
        console.log('response from backend service',response);
        return response;
      })
      .catch(this.handleError);
  }

  private handleError (error: Response | any) {
    console.error('WebToBackendInterfaceService::handleError', error);
    return 'error from the server:'+error;
  }

}

As far as I can see you do not subscribe. You should have a component which uses this service. In the Service you should return the Observable which is created by http.post. Check this out: https://angular.io/guide/http — Max, Feb 20 '18 at 06:41

score 1 · Accepted Answer · edited Apr 03 '19 at 13:35

so here is a simple demonstration of server calls through angular

you must have service.ts file in your app which will connect to back-end server this file is usually used for a connection between server and front-end.

import { Injectable } from '@angular/core';
import {ColaboratorResponse} from '../domain/colaborator.response';
import {Colaborator} from '../domain/colaborator';
import { Headers, RequestOptions, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

export class YourService{

constructor(private httpClient: HttpClient) {}
getUser(id:string){   
   return this.httpClient.get(this.API_URL+this.GET_USER_URL);
}

Now you have to use this service in your component. wherever you want to call this getUser function like

import your service first

import {ColaboratorService} from 'from/your/service/location';

initialize this in component constructor

constructor(
       private confirmationService: ConfirmationService,
       private _ser: YourService
     ) {}

and call this in component by making a function

getUserDetails(){
this._ser.getUser(id).subscribe((User : any)=>{this.User =User;});

//console.log('here'+this.User);


}

so here is your this.User object

import {User} from "./user";

hope this helps.

The code in this reply uses the "old" `Http`. Consider using the newer `HttpClient` as specified by the OP. (Then you no longer need the .map.) — DeborahK, Feb 20 '18 at 07:45

Angular Httpclient not hitting backend API

1 Answers1