Cannot read property '__k' of null - FullCalendar + Angular 11

Question

I am using Full Calendar plugin for Angular 11. I keep getting the error "Cannot read property '__k' of null". Seems it is happening when calendar.render() is called. But can't get to the bottom of it. Any help is much appreciated.

This is my ts file:

export class FullCalendarComponent {
    public calendar: Calendar | undefined;
    calendarEl: any;

    calendarOptions: CalendarOptions = {

        slotMinTime: '07:00:00',
        slotMaxTime: '19:00:00', 
        slotDuration: '00:15:00',
        height: 680,
        events: [
            this.currentEvents,
        ],

        headerToolbar: {
            start: 'today prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        firstDay: 1,
        initialView: 'timeGridWeek',
        weekends: true,
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        select: this.handleDateSelect.bind(this),
        eventClick: this.handleEventClick.bind(this),
        allDaySlot: false,

       }
    ngOnInit(): void {

        let calendarEl = document.getElementById('calendar');
        let calendar = new Calendar(calendarEl!, this.calendarOptions);
        calendar!.render();

    }

And my html file

  <div class="calendar">
        <full-calendar #calendar [options]="calendarOptions"></full-calendar>
    </div>

Here is a screenshot of the error:

Answer 1

The error is there because calendarEl is null. Declare calendar somewhere before that function if you need to access it globally. After the line where you define calendarEl, wrap everything in the conditional check

  var calendar;
   let calendarEl = document.getElementById('calendar');
   if (calendarEl != null) {
        let calendar = new Calendar(calendarEl!, this.calendarOptions);
        calendar!.render();
   }
});