Call REST POST API with Angular 5 and HTTPClient - spring

Question

I'm creating frontend for my backend using Angular and having troubles calling POST API using HTTPClient. Below is my code:
article.service.ts
#Injectable()
export class ArticleService {
url = "//localhost:8080/deleteArticle";
constructor(private http: HttpClient) { }
deleteArticle(article: Article): Observable<HttpResponse<Article>> {
return this.http.post<Article>(this.url, article,
{
observe: 'response'
}
);
}
}
article.component.ts
#Component({
selector: 'app-article',
templateUrl: './article.component.html'
})
export class AcrticleComponent implements OnInit {
articleForm: FormGroup;
constructor(private formBuilder:FormBuilder, private articleService: ArticleService) {
}
ngOnInit() {
this.articleForm = this.formBuilder.group({
title: ['', [ Validators.required ] ]
});
}
onFormSubmit() {
let article = this.articleForm.value;
this.deleteArticle(article);
this.articleForm.reset();
}
deleteArticle(article: Article) {
this.articleService.deleteArticle(article).subscribe(
article => {
console.log(article);
},
err => {
console.log(err);
}
);
}
get title() {
return this.articleForm.get('title');
}
}
Spring Controller:
#PostMapping("/deleteArticle")
#CrossOrigin(origins = "http://localhost:4200")
public String deleteArticle(#RequestParam(value = "id") String id) {
deleteService.deleteArticle(id);
}
After entering the title and hitting submit, it returns this error (status 404):
{error: "Collection 'localhost:8080' not found"}
Can you show me what I did wrong and how my angular frontend couldn't find my backend endpoint?

Answer 1

The url needs to be complete.
include the http:
But I would suggest using the webpack dev server proxy.
If you put all your apis under the /api/ url then you can proxy all calls to /api/* back to your spring backend.
then when you launch your project you do the same there and proxy in /api/* using nginx or similar.
You can read more about how to proxy using angular-cli here https://github.com/angular/angular-cli/wiki/stories-proxy

Answer 2

Make sure you are spring application is running on the same port as 8080 and add http before your url. I hope this not your problem,but try like this..
#Injectable()
export class ArticleService {
url = "http://localhost:4200/deleteArticle";//add http here
constructor(private http: HttpClient) { }
deleteAccount(article: Article): Observable<HttpResponse<Article>> {
return this.http.post<Article>(this.url, article,
{
observe: 'response'
}
);
}
}
EDIT
Add a class Like Article and get the Id which you are sending from Article class of Angular Service
#PostMapping("/deleteArticle")
#CrossOrigin(origins = "http://localhost:4200")
public String deleteArticle(#RequestParam() Article article,
RedirectAttributes redirectAttributes) {
deleteService.deleteArticle(article.id, redirectAttributes);
}