Uncaught Error: Unable to convert "undefined" into a date (Angular)

In this example, I want to get all bookings data from a service and push them to an array CalendarEvent[]. But I received this error Uncaught Error: Unable to convert "undefined" into a date. I assumed that something is wrong with my service?

ng-calendar.component.ts:

export class NgCalendarComponent {
  events: CalendarEvent[] = [];
  bookings: any = {};
  date: string;

  constructor(private bookingService: BookingService) {}

  ngOnInit() {
    this.bookings = this.bookingService.getAllBookings();

    for (let booking of this.bookings) {
      var b = this.bookings[booking];
      this.date = formatDate(b.bookDate, 'medium', 'en-us', 'GMT+8');

      this.events.push({
        start: new Date(this.date),
        title: b.purpose,
      });
    }
  }

booking.service.ts:

export class BookingService {
  constructor(private http: HttpClient) { }

  getAllBookings() {
    return this.http.get('/api/bookings/')
      .pipe(map(response => response));
  }
}

BookingResource.cs:

public class BookingResource
{
    public int Id { get; set; }
    public RoomResource Room { get; set; }
    public KeyValuePairResource Building { get; set; }
    public DateTime BookDate { get; set; }
    public ContactResource Contact { get; set; }
    public string Purpose { get; set; }
    public ICollection<TimeSlotResource> TimeSlots { get; set; }

    public BookingResource()
    {
        TimeSlots = new Collection<TimeSlotResource>();
    }
}

getAllBooking() returns an observable, you have to subscribe to it to get the result. Or convert it to a promise :

  async getAllBookings() {
    return this.http.get('/api/bookings/').toPromise();
  }

And call it like this :

  async ngOnInit() {
    this.bookings = await this.bookingService.getAllBookings();
    ...