refresh error on devextreme scheduler's plugin - angular 4

Question

i'm trying to make an appointment scheduler's app using devextreme scheduler. I have a little bug. I would like to know why, when i create an appointment and drag and drop the appointment i just create i have this error on my console :

PUT http://localhost/v0/croissant/undefined 404 (Not Found)
appointment.service.ts:19 An error occurred Response {_body: "", status: 404, ok: false, statusText: "Not Found", headers: Headers…}
webpackJsonp.../../../../../src/app/services/appointment.service.ts.AppointmentService.handleError @ appointment.service.ts:19
ZoneDelegate.invoke @ zone.js:203
onInvoke @ core.es5.js:3890
ZoneDelegate.invoke @ zone.js:202
Zone.run @ zone.js:96
(anonymous) @ zone.js:462
ZoneDelegate.invokeTask @ zone.js:236
onInvokeTask @ core.es5.js:3881
ZoneDelegate.invokeTask @ zone.js:235
Zone.runTask @ zone.js:136
drainMicroTaskQueue @ zone.js:368
ZoneTask.invoke @ zone.js:308
core.es5.js:1020 ERROR Error: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost/v0/croissant/undefined

but when i refresh the page and then i move the appointment, everything works fine...

Here is my update appointment method on my appointment.Service.ts

updateAppointment(id: string, userId :string, timestamp :string, reason: string): Promise<Appointment>{

    let bodySearchParam = new URLSearchParams();
    bodySearchParam.append('userId', userId );
    bodySearchParam.append('timestamp', this.datetotimestamp(timestamp).toString());
    bodySearchParam.append('reason', reason);
    let body = bodySearchParam.toString();


    var AppointmentUrlUpdate = this.AppointmentUrlWrite + "/" + id;

    return this.http.put(AppointmentUrlUpdate, body)
                    .toPromise()
                    .then(response =>
                      console.log("event updated")
                    )
                    .catch(this.handleError);

  }

here is my eventHandler on my calendar component

  updateAppointment(e: any){
    e.appointmentData.endDate = this.add30mnTo(e.appointmentData.startDate); // bugFix pour l'affichage du calendrier
    this.appointmentService.updateAppointment(e.appointmentData.id, e.appointmentData.ownerId, e.appointmentData.startDate, e.appointmentData.text)
  }

and here is where i call my eventHandler on my calendar.component.html

<dx-scheduler
    (onAppointmentUpdated)= "updateAppointment($event)"
>

</dx-scheduler>

thank's for your help !

Answer 1

The problem is, my api need and ID to update the appointment. But the id isn't stored for now. The resolution's method is :

  createAppointment(userId :string, timestamp :string, reason: string): Promise<Appointment> {

    let bodySearchParam = new URLSearchParams();
    bodySearchParam.append('userId', userId );
    bodySearchParam.append('timestamp', this.datetotimestamp(timestamp).toString());
    bodySearchParam.append('reason', reason);
    let body = bodySearchParam.toString();

    console.log(body)
    return this.http.post(this.AppointmentUrlWrite,body)
                  .toPromise()
                  .then(response =>
                    this.createdId = response.json().id // Get the appointment's ID
                  )
                  .catch(this.handleError);
  }

make a function who returns the createdID:

  getCreatedId(){
    return this.createdId;
  }

and on the updateAppointment method do this :

if(e.appointmentData.id == null){e.appointmentData.id = this.appointmentService.getCreatedId();}

the condition serves for the appointment who's already have an id ( all of the appointment have an id after refreshing the page)

Hope it can serve for another one :)