DayPilot Angular 8 Scheduler Error: The placeholder element not found when refresh

Question

I was using Angular 8 DayPilot Scheduler and it able to show the scheduler chart well when redirect from link, but if direct enter the URL or refresh the current scheduler page, the scheduler chart will disappear and will hit error:

SchedulerComponent.html:1 ERROR Error: DayPilot.Scheduler: The placeholder element not found: 'dp_157775431314089808'.
    at viewWrappedDebugError (core.js:19411)
    at callWithDebugContext (core.js:30049)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:29741)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:20458)
    at ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick (core.js:26837)
    at core.js:26726
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:25986)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)

My SchedulerComponent.html line 1:

<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>

Answer 1

I was able to fix it by apply below alternative solution: force re-render the component when refresh the page although the console error still there but at least the scheduler can be use now

html

<div *ngIf="_reload">
<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>
</div>

ts

export class SchedulerComponent implements AfterViewInit{
_reload = true;

  constructor() {}

  private reload() {
    setTimeout(() => (this._reload = false));
    setTimeout(() => (this._reload = true));
  }

  public ngAfterViewInit(): void {
    this.reload();
  }
}