title: consume hhtp post request in Angular 9
body: <p>I am new to Angular and try to consume web API in angular 9. My http get request working well but when I  send hhtp post request I find the following errors
      zone-evergreen.js:2845 POST <a href="http://127.0.0.1:8000/insert" rel="nofollow noreferrer">http://127.0.0.1:8000/insert</a> 500 (Internal Server Error)
      core.js:6189 ERROR 
      In post request i have made a create-user component and a service. The web API which I have created is in LARAVEL.I used POSTMAN tool to submit GET/PUT/POST/DELETE and these requests are working well but in angular get request is working and post request is not working.
      I could not find the reason of the following errors.Please I request to help me to solve this problem. I shall be very thankful.
      code of my different files is given below</p>
  
  <pre><code>**user.service.ts**
  
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class UserService {
  
    constructor(private http: HttpClient) { }
  
    getUser(): Observable&lt;any&gt; {
      return this.http.get('http://127.0.0.1:8000/basic');
    }
    addUser(form: any): Observable&lt;any&gt; {
  
      return this.http.post('http://127.0.0.1:8000/insert', form);
    }
  }
  
  create-user.component.html
  &lt;br&gt;&lt;br&gt;
  &lt;form #form="ngForm" (submit)="onSubmit(form)"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Name&lt;/label&gt;
      &lt;input type="text" class="form-control" name="name" ngModel placeholder="Enter Name"&gt;
      &lt;small id="emailHelp" class="form-text text-muted"&gt;&lt;/small&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="email"&gt;Email address&lt;/label&gt;
      &lt;input type="email" class="form-control" name="email" mgModel aria-describedby="emailHelp"
        placeholder="Enter email"&gt;
      &lt;small id="emailHelp" class="form-text text-muted"&gt;&lt;/small&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="password"&gt;Password&lt;/label&gt;
      &lt;input type="password" class="form-control" name="password" ngModel placeholder="Password"&gt;
    &lt;/div&gt;
  
    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  create-user.component.ts
  import { Component, OnInit } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import { UserService } from '../services/user.service';
  
  @Component({
    selector: 'app-create-user',
    templateUrl: './create-user.component.html',
    styleUrls: ['./create-user.component.css']
  })
  export class CreateUserComponent implements OnInit {
  
    constructor(private service: UserService) { }
  
    ngOnInit(): void {
    }
  
    onSubmit(form: NgForm) {
      this.service.addUser(form.value).subscribe(
        res =&gt; {
          alert('data has been added');
        }
      )
      console.log(form.value);
    }
  
  }
  </code></pre>