Angular http put through 404 for an existing and correct URL !!! from json server

Question

I'm trying to apply Angular HTTP put using reactive forms for the first time. My problem is when I apply the following code I get an error of 404. The error indicates a server URL that is not found (XHR PUT http://localhost:3000/feedback). When I use the URL separately it brings data normally and the message that comes from the JSON server is 200 (GET /feedback 200 28.207 ms - 200). that means no problem with the URL !!! but still, get 404 in case of HTTP put

JSON server structure (i need to make put into "feedback": [])

{
  "dishes": [ ...
  ],
  "promotions": [ ...
  ],
  "leaders": [ ...
  ],
  "feedback": [
   {
      "firstname": "Ali",
      "lastname": "Sleam",
      "telnum": "123123123",
      "email": "Ali@gmail.com",
      "agree": false,
      "contacttype": "None",
      "message": "This is my message"
   }
  ]
}

feedback.service.ts

...
export class FeedbackService {

  constructor(private http: HttpClient,
    private processHTTPMsgService: ProcessHTTPMsgService) { }

    submitFeedback(feedBack: Feedback): Observable<Feedback> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
    return this.http.put<Feedback>('http://localhost:3000/feedback', feedBack, httpOptions);
  }

}

component.ts

...
feedbackForm: FormGroup;
feedback: Feedback;
contactType = ContactType;
...
constructor(private fb: FormBuilder,private feedbackService: FeedbackService) {
  this.createForm();
}
...
createForm() {
  this.feedbackForm = this.fb.group({
    firstname: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(25)] ],
    lastname: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(25)] ],
    telnum: ['', [Validators.required, Validators.pattern] ],
    email: ['', [Validators.required, Validators.email] ],
    agree: false,
    contacttype: 'None',
    message: ''
  });
}
...
onSubmit() {
  this.feedback = this.feedbackForm.value;

  this.feedbackService.submitFeedback(this.feedback) // <--- add to the server (put)
  .subscribe(feedback => { this.feedback = feedback; }, 
  errmess => { this.feedback = null; this.errMess = <any>errmess; });
}

component.html

<form novalidate [formGroup]="feedbackForm" #fform="ngForm" (ngSubmit)="onSubmit()">
  ...
  <button type="submit" mat-button class="background-primary text-floral-white">Submit</button>
</form>

Update -- The feedback class

export class Feedback {
    firstname: string;
    lastname: string;
    telnum: number;
    email: string;
    agree: boolean;
    contacttype: string;
    message: string;
};

export const ContactType = ['None', 'Tel', 'Email'];

score 1 · Answer 1 · answered Mar 15 '21 at 18:28

I finally found the solution to this problem, based on the answer Here

JSON server needs an id whereas my class didn't include an id. It doesn't matter to assign a value for the id but it is necessary to include it at least in the class as follows.

export class Feedback {
    id: number;
    firstname: string;
    ...
};

score 0 · Answer 2 · answered Mar 15 '21 at 08:50

Since the URL is working as a GET Request, instead of using http.put, try using http.get
This is not related to Angular. You are using a PUT Request to access a URL which is exposed as a GET Request in the server.
Since the Server doesn't know about the PUT Request, it sends 404.

Angular http put through 404 for an existing and correct URL !!! from json server

2 Answers2