error TS2339: Property 'subscribe' does not exist on type '{}'

Question

error TS2339: Property 'subscribe' does not exist on type '{}'. Service file :

import { HttpClient, HttpHeaders,HttpResponse  } from '@angular/common/http';
import { Person } from './person';
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import 'rxjs/add/operator/map'


import { map } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class ApiService {
    baseURL: string = "http://localhost:3000/api/persons/";

constructor(private http: HttpClient) {
}
 
  
 addPerson(id,name)
    {

      var obj={};
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        let formData:FormData = new FormData();  
        formData.append('id',id);  
        formData.append('name',name);   

        this.http.post(this.baseURL + "addPerson?token",formData).pipe(map(data => {
          alert(data);
          return data;
         
        }));

        return obj;
      }
    }

Component file :

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Person } from './person';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'httppost';
   people:Person[]=[];
  person = new Person();

formData:any = {};


  
  constructor(private apiService:ApiService) {
    this.formData.ID =""; this.formData.Name= "";
  }
 
  ngOnInit() {

  }
 

  addPerson() {
    this.apiService.addPerson(this.formData.ID,this.formData.Name).subscribe(data => {
        console.log(data)
       
      })      
  }
}

have service file in which i have to call my api to get the api's and when i am going to subscribe the method in the other class where i am calling that service method then its showing the error that the property "subscribe " does not exist on type {}

You are not returning the Observable from your service method? — Vimal Patel, Dec 30 '21 at 13:11
Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — jonrsharpe, Dec 30 '21 at 13:13

score 0 · Answer 1 · answered Dec 30 '21 at 13:15

0

Your service method should return an Observable to use subscribe, right now it is just returning an object, should be something like

 addPerson(id,name): Observable<Person> {
    return this.httpClient.post<Person>(this.baseURL + "addPerson?token",formData);
  }

answered Dec 30 '21 at 13:15

Sajeetharan

216,225
63
350
396

error TS2740: Type '{}' is missing the following properties from type 'Observable': source, operator, lift, subscribe, and 3 more. return obj; in service file – sai Dec 30 '21 at 13:25
It's just a sample request, you need to use the correct data model – Sajeetharan Dec 30 '21 at 13:28
since i'm new to this concept, can u give me the correct data model – sai Dec 30 '21 at 13:30

score 0 · Accepted Answer · answered Dec 30 '21 at 18:05

First of all, I want to mention that using var is not a good practice anymore, so you should consider refactor everything to use let or const (for more info see here).
Secondly, using Typescript without any types or only any as type are also not good practices because you're losing all beneftis of Typescript.

Let's have a look on your current code:

addPerson(id,name)
  {
    var obj={};
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let formData:FormData = new FormData();  
    formData.append('id',id);  
    formData.append('name',name);   

    this.http.post(this.baseURL + "addPerson?token",formData).pipe(map(data => {
      alert(data);
      return data;
    }));

    return obj;
  }

Your function declaration does not contain any types, based on the names I assume they are of type string. The id could be of type number as well.
The return value of your function is Object because you're returning your obj and not the expected Observable because of that you're getting the eror Property 'subscribe' does not exist on type '{}'. (for more info see here).

To make your code you need to adjust your code as following:

// I've added typings but they're not necessary to make it work
addPerson(id: string | number, name: string): Observable<Person> {

    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    const formData: FormData = new FormData();  
    formData.append('id', id);  
    formData.append('name', name);   
    
    // Return here your HTTP request <- This will make it work
    return this.http.post<Person>(this.baseURL + "addPerson?token",formData)
        .pipe(
            map(data => {
                return data;
            })
        );

}

By returning the HTTP request the return value and type of your function is Observable<Person>, so the subscription within your component will work as expected.

Based on your comment, the type for Person could look like this:

export interface Person {
    id: string | number;
    name: string;
}

Since I don't know your data model I cannot be more specific with the interface.

error TS2339: Property 'subscribe' does not exist on type '{}'

2 Answers2