Angular http.post not sending data with subscribe

Question

I am trying to post data to my api. The post.subscribe does not send any data, no error is being thrown. The API is 100% working.
Here is my code:
httpservice.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Product } from './Product';
import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})

export class HttpService {

  baseURL = 'https://localhost:2403/testapi/';

  constructor(private http: HttpClient) {
    this.products = new Array();
  }
  products: Product[];
  post(product: Product): boolean {
    if ( !this.checkIfProductExistsAlready(product) ) {
      console.log('posting product');

      this.http.post<any>(baseURL,{"product": product.name, "price": 10, "done": false})
        .subscribe((data) => {
          console.log(data);
          product.id = data.id;
          console.log('hi');
        },
        error => console.log('uojdsigdk' + error)
      );
      console.log('posted ' + product.id);
      this.products.push(product);
      return true;
    } else {
      return false;
    }
  }

form.component.ts

addItem(): void {

    this.isError = false;
    if (!this.httpservice.post(new Product(-1, this.name, this.price, 0))) {
      this.isError = true;
    }
}

This is the provider declaration in the app.module.ts

[...]
  providers: [HttpService],
[...]

Is it possible that this is caused by a config file?

Could you provide some more context? Are you saying the data is not being sent to your back end? — Friso Hoekstra
– Friso Hoekstra, Commented Mar 3, 2020 at 12:38
Your service gets provided twice. If you want a singleton service just provide it like this: "@Injectable({providedIn: 'root'})" and delete this: "providers: [HttpService]" angular.io/guide/singleton-services — tobiso
– tobiso, Commented Mar 3, 2020 at 12:45

Niklas · Accepted Answer · 2020-03-03 12:34:23Z

2

Maybe this happens because you try to access the local webserver over https?

baseURL = 'https://localhost:2403/testapi/';

Otherwise use fiddler, do a post request on your api and look what the server is returning. :)

answered Mar 3, 2020 at 12:34

Niklas

1,8241 gold badge10 silver badges8 bronze badges

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

Comments

Friso Hoekstra · Accepted Answer · 2020-03-03 13:20:36Z

1

I think baseURL is undefined inside your function scope. Try this.baseURL instead. Also make sure your local webserver is serving HTTPS, as mentioned before

this.http.post<any>(baseURL, product);

becomes

this.http.post<any>(this.baseURL, product);

On a side node, a couple of things are potentially wrong with your Observable code, as well as the way you are injecting your Service in your app, as has been mentioned in comments.

edited Mar 3, 2020 at 13:20

answered Mar 3, 2020 at 13:03

Friso Hoekstra

8852 gold badges9 silver badges24 bronze badges

Comments

Rama Krishna · Accepted Answer · 2020-03-03 13:11:31Z

0

add response type

addItem(): void {    
    this.isError = false;
    if (!this.httpservice.post(new Product(-1, this.name, this.price, 0), { observe: 'response',responseType: 'text' })) {
      this.isError = true;
    }
}

answered Mar 3, 2020 at 13:11

Rama Krishna

66310 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular http.post not sending data with subscribe

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related