Issue
I have trouble consuming a tomcat POST service with an angular front end. I'm fairly new to Angular. My environment
- tomcat 9.0
- jdk 17
- Angular 17 with standalone components
- javax.ws.rs framework
- Eclips 2023-06
- vs code 1.85.1
I have tried Postman and the service respond as expected. The server side. I have breakpoints on both System.out... and return Response... When I use postman i stop at both breakpoint. When use the angular frontend. I get nothing, even the eclipse console is blank. I was expecting som kind of out in form an exception, get nothing.
@POST
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.TEXT_PLAIN)
@Path("/tag/add")
public Response addTag(AddTag tag) {
System.out.println(tag);
return Response.status(200).entity("new tag: " + tag).build();
}
component.html
<div class="tagForm">
<form [formGroup]="filterForm">
<mat-form-field>
<mat-label>Namn på ny tag</mat-label>
<input type="text" matInput formControlName="tagName">
</mat-form-field>
<button mat-button (click)="addTag()">Lägg till</button>
</form>
</div>
component.ts
addTag() {
let name = this.tagName?.value
let tagName = <addTag>({
name: name,
id: this.imageId
});
console.log("addTag: " + tagName);
this.photoalbumService.addTag(tagName);
}
photoalbum.service.ts
addTag(data: addTag): Observable<string> {
const httpOptions = {
headers: ({ 'Content-Type': 'application/json' })
}
let jsonData = JSON.stringify(data);
console.log(jsonData);
const url = baseURL + "/tag/add";
console.log("addTag, url: " + url);
return this.httpClient.post<string>(url, jsonData, httpOptions);
}
I get the baseURL from an environment(environment.dev.ts) file.
export const environment = {
production: "dev",
serverBaseUrl: "http://localhost:8080/photoalbumservice/rest/api",
imageBaseUrl: "http://localhost:8080"
};
I have tried with postman, and that work.
http://localhost:8080/photoalbumservice/rest/api/tag/add
I send the following as body, raw.
{ "id": 123, "name":"kalle"}
The console log in vs code it ass following.
addTag: [object Object] tag.component.ts:69:12
{"name":"jhkl","id":413791} photoalbum.service.ts:73:12
addTag, url: http://localhost:8080/photoalbumservice/rest/api/tag/add photoalbum.service.ts:75:12
I pretty sure that I missed some info needed, so if you need more info I will do my best to supply.
Any help is welcome.
Solution
Try to subscribe to the returned Observable when calling addTag().
this.photoalbumService.addTag(tagName).subscribe({
next: value => console.log('Observable emitted the next value: ' + value),
error: err => console.error('Observable emitted an error: ' + err),
complete: () => console.log('Observable emitted the complete notification')
});
Answered By - linusum
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.