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": "[email protected]",
      "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'];

MOHAMED ABUELATTA · Accepted Answer · 2021-03-15 18:28:16Z

1

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;
    ...
};

answered Mar 15, 2021 at 18:28

MOHAMED ABUELATTA

3552 gold badges5 silver badges18 bronze badges

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

Comments

Abdu Manas C A · Accepted Answer · 2021-03-15 08:50:11Z

0

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.

answered Mar 15, 2021 at 8:50

Abdu Manas C A

1,1491 gold badge11 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related