Not able to make rest API call from Angular to Spring REST controller

Question

I'm trying to make a rest call to my spring controller, it works when I put the URL in browser and able to see the JSON response. But, when I try the same by integrating into the Angular code, it doesn't throw any exception either in browser console or server console.

Here is my code.

Imports

import { Component, OnInit  } from '@angular/core';
import { Http, Response  } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

class Result {
statusCode : number;
errorMsg: string;
result: string;

}


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],

 })
 export class AppComponent {
 ngOnInit() {
   this.getEmployees();
 }

public getEmployees(): Observable<Result[]> {

   return this.http
    .get(this.API_URL + '/employees')
    .map(response => {
     const todos = response.json();
     console.log(todos);
     return "";
})
.catch(this.handleError);
}

private handleError (error: Response | any) {
  console.error('ApiService::handleError', error);
  return Observable.throw(error);
}

And here is my spring code

  @RequestMapping(value ="/employees", method = RequestMethod.GET)
public ResultDto getEmployees(HttpServletRequest req) {
    ResultDto result = null;
    try {
        ServletContext ctx = req.getServletContext();
        @SuppressWarnings("unchecked")
        Map<String,String> users = (Map<String, String>) ctx.getAttribute("userRoles");
        result = new ResultDto();
        result.setStatusCode(EmapConstants.SUCCESS);
        result.setResult(users);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return result;
}

My ResultDto class is having three properties

private int statusCode;
private String errorMsg;
private Object result;

Any ideas why its not hitting the method?

it seems like a cors issue to me. Do the request via postman, then through your app and use fiddler to see the differences. — itdoesntwork, Jan 03 '19 at 12:15
@itdoesntwork, there is no cors issue.. as it was not caught in console — Syed, Jan 03 '19 at 12:21
have you checked fiddler? it might be any request issue.. even wrong content-type — itdoesntwork, Jan 03 '19 at 12:22
Do you *subscribe* to the observable anywhere? Give a [mcve]. — jonrsharpe, Jan 03 '19 at 12:24
You need to subscribe; observables are lazy so the request isn't made if nobody wants the response. Maybe you could collaborate with the author of https://stackoverflow.com/q/54021878/3001761! — jonrsharpe, Jan 03 '19 at 12:29
And you would have seen that the request was not made if you used fiddler as I suggested before. — itdoesntwork, Jan 03 '19 at 12:31
@itdoesntwork, I understood your point.. But , I'm not able to understand how to subscribe — Syed, Jan 03 '19 at 12:32
@Syed https://stackoverflow.com/questions/41381200/angular-2-http-get-not-getting Does it work now? — itdoesntwork, Jan 03 '19 at 12:33
@itdoesntwork.. Im checking it.. Please allow me few min.. I shall update you on that. — Syed, Jan 03 '19 at 12:37
@itdoesntwork, I used first solution this.http.get(`http://swapi.co/api/people/1`) .map((response: Response) => { console.log(response.json()); response.json(); }) .subscribe();, but it throws CORS issue — Syed, Jan 03 '19 at 12:46

Erbsenkoenig · Answer 1 · 2019-01-03T12:33:55.533

-1

Assuming you are using the HttpClient from @angular/common/http:

If you use the HttpClient you can either add a type to the http.get() which is your expected response json. Using this you only get the response body as your result. You could also add the option observe: 'response' to your get request in order to get the actual response back.

You would probably only want to use the latter if you need other information than the body e.g. the response status. If you only need the body your request could look something like this:

constructor(private httpClient: HttpClient) {}

getEmployees() Observable<Result[]>{
    return this.httpClient
        .get<Result[]> (this.API_URL + '/employees', {params: _params})
        .pipe(catchError(() => this.handleError()));

}

Yeah and you always have to subscribe to the observable that's right. As mentioned in the comments as well.

edited Jan 03 '19 at 12:33

answered Jan 03 '19 at 12:17

Erbsenkoenig

1,584
14
18

There is no HttpClient in my code. It throws compilation error – Syed Jan 03 '19 at 12:19
1

Are you using the HttpClient from @angular/common/http (Angular 4+) or the former Http from @angular/http? – Erbsenkoenig Jan 03 '19 at 12:27
Ah ok. Then your code seems to be correct. Did you just call your method getEmployees() somewhere or did you actually subscribe to the result? As itdoesntwork stated, without subscribing to the Observable, there aren't any requests made. – Erbsenkoenig Jan 04 '19 at 09:15

Not able to make rest API call from Angular to Spring REST controller

Imports

1 Answers1