Angular10 : Property 'map' does not exist on type 'Observable<Response>'

Question

I am making CURD application in angular 10. I am tryig to insert user data into database through api. For the database purpose i have used microsoft sql server Managment studio.But there are several errors occour there. So I have found these errors in similar questions of stackoverflow but didn;t solve my problem.

employee.service.ts(service)

import { Injectable } from '@angular/core';
import {Employee} from '../ShareEmployee/employee';
import {Http,Response,Headers,RequestOptions,RequestMethod} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';



@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  SelectedEmployee: Employee;
  EmployeeList: Employee[];

  constructor(private http:Http) { }

  PostEmployees(emplo :Employee)
  {
    var body = JSON.stringify(emplo);
    var headeroptions=new Headers({'Content-Type':'application/json'});
    var requestoptions = new RequestOptions ({method: RequestMethod.Post,headers:headeroptions});
    return this.http.post('http://localhost:51377/api/Employees',body,requestoptions).map(x=>x.JSON())
  }

employee.component.ts

import { Component, OnInit } from '@angular/core';
import {Employee } from '../ShareEmployee/employee';
import { EmployeeService } from '../ShareEmployee/employee.service';
import { NgForm } from '@angular/forms';



@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  constructor(public employeeservice: EmployeeService) { }

  ngOnInit(): void {
    
  }

  resetBuuton(form:NgForm)
  {
    if(form != null)form.reset();
    this.employeeservice.SelectedEmployee=
    {
      EmployeeID : null,
      EmployeCode : '',
      EmployeeEmail : '',
      EmployeeName : '',
      EmployeeTP : ''
    }
  }


  onsubmit(form:NgForm)
  {
    if(form.value.EmployeeID==null)
    {
      this.employeeservice.PostEmployees(form.value).suscribe(data=>{
        this.resetBuuton(form);
      })
    }
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpModule} from '@angular/http';

import { AppComponent } from './app.component';
import { EmployeeDataComponent } from './employee-data/employee-data.component';
import {EmployeeComponent} from './employee-data/employee/employee.component';
import {EmployeeListsComponent} from './employee-data/employee-lists/employee-lists.component';

import { from } from 'rxjs';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeDataComponent,
    EmployeeComponent,
    EmployeeListsComponent
  
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The error i have got

ERROR in src/app/employee-data/ShareEmployee/employee.service.ts:24:87 - error TS2339: Property 'map' does not exist on type 'Observable<Response>'.   

    24     return this.http.post('http://localhost:51377/api/Employees',body,requestoptions).map(x=>x.JSON())

Answer 1

• Angular itself already takes care of serialising your request body - so you don't have to do that yourself. The JSON.stringify is not needed. Just pass the emplo object directly

• Same for the response type. The default is JSON. So you don't have to do anything.

• If you need to map over the response data for other reasons: We can't use map on the Observable prototype directly anymore since RxJs 5 or 6. Instead we use the pipe() function and then inside of it the map operator. The correct import would be import {map} from 'rxjs/operators'

this.http.post('http://localhost:51377/api/Employees', emplo).pipe(map(responsedata => console.log(responsedata))