Call REST POST API with Angular 5 and HTTPClient

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?

is the rest call reaching to your backend?

Shadab Faiz
– Shadab Faiz

2018-09-12 04:49:38 +00:00
Commented Sep 12, 2018 at 4:49 — Shadab Faiz
– Shadab Faiz, Commented Sep 12, 2018 at 4:49
the error is loud and clear.

Lokesh Pandey
– Lokesh Pandey

2018-09-12 05:14:29 +00:00
Commented Sep 12, 2018 at 5:14 — Lokesh Pandey
– Lokesh Pandey, Commented Sep 12, 2018 at 5:14

Leon Radley · Accepted Answer · 2018-09-12 05:00:44Z

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

answered Sep 12, 2018 at 5:00

Leon Radley

7,7125 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M. Henrikh Over a year ago

I did try to add http, but it gives this error: {error: "Collection 'undefined' not found"}

Ganesh · Accepted Answer · 2018-09-12 07:19:11Z

0

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);
    }

edited Sep 12, 2018 at 7:19

answered Sep 12, 2018 at 5:07

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

1 Comment

M. Henrikh Over a year ago

I did try to add http, but it gives this error: {error: "Collection 'undefined' not found"}

Collectives™ on Stack Overflow

Call REST POST API with Angular 5 and HTTPClient

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related