ObjectUnsubscribedError - Angular 11 RXJS and @ngneat/until-destroy

Question

I get an error message that I don't quite understand. The trace log does not say much. I don't know where this message is coming from. The webapp works as usual, but the browser debugger tool is slow because the error is thrown very often at once.

I unsubscribe all the observables via @UntilDestroy({ checkProperties: true }) from the library @ngneat/until-destroy": "^8.1.3 on Angular 11.

What is this error? Why does it occur and how can it be prevented?

node_module/@angular/core/ivy_ngcc/fesm2015/core.js:5980: ObjectUnsubscribedErrorImpl {message: "object unsubscribed", name: "ObjectUnsubscribedError"}

e.g.

@UntilDestroy({ checkProperties: true })
@Component({
  selector: 'diagram-card',
  template: `
    <widget-diagram></widget-diagram>
  `,
  styleUrls: ['./diagram-card.component.scss'],
})
export class DiagramCardComponent implements OnInit {
  ...
}

Edit:

@Component({
  selector: 'diagram-card',
  template: `
    <widget-diagram [data$]="values$"></widget-diagram>
  `,
  styleUrls: ['./diagram-card.component.scss'],
})
export class DiagramCardComponent implements OnInit {
  public deviceId: string;
  public dashboardId: string;

  @Input()
  public widgetId: string;

  public widget$: ReplaySubject<DashboardWidget> = new ReplaySubject<DashboardWidget>(1);
  public itemHistory$: ReplaySubject<DeviceHistoryItemEntry[]> = new ReplaySubject<DeviceHistoryItemEntry[]>(1);

  public values$: ReplaySubject<TimeSeries[]> = new ReplaySubject<TimeSeries[]>(1);

  constructor(
    private store: Store,
    private route: ActivatedRoute,
    private loggerApi: LoggerApi,
    private manageDeviceHistoryUsecase: ManageDeviceHistoryUsecase
  ) {}

  public ngOnInit(): void {
    this.onLoadUrlParam();
    this.loadDeviceHistory();
    this.onLoadWidget();
    this.onUpdate();
  }

  private onUpdate(): void {
    this.widget$
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        switchMap((widget) =>
          combineLatest([
            of(widget),
            this.store.select(DeviceHistoryStore.getItemHistoryEntries(this.deviceId, widget.data[0].itemId)),
          ])
        )
      )
      .subscribe(([widget, deviceHistory]) => {
        this.loggerApi.debug('Update diagram of item ' + widget.data[0].itemId);

        const diagram: TimeSeries[] = [];
        const points: ChartPoint[] = [];

        // Add all data points
        deviceHistory.forEach((entry) => {
          points.push({
            name: entry.timestampId.toLocaleString(),
            value: entry.state,
          });
        });

        // Add time series to diagram
        diagram.push({
          name: widget.name,
          series: points,
        });

        this.values$.next(diagram);
      });
  }

  private loadDeviceHistory(): void {
    this.widget$.pipe(take(1)).subscribe((widget) => {
      const dateFrom = new Date();
      dateFrom.setDate(dateFrom.getDate() - 7);
      this.manageDeviceHistoryUsecase.loadDeviceItemHistory(this.deviceId, widget.data[0].itemId, {
        from: dateFrom,
        to: new Date(Date.now()),
        samplingMethod: SamplingMethodType.NONE,
      });
    });
  }

  private onLoadWidget(): void {
    this.store
      .select(DashboardStore.getWidgetFromDashboard(this.widgetId, this.dashboardId))
      .pipe(distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)))
      .subscribe((widget) => {
        this.widget$.next(widget);
      });
  }

  private onLoadUrlParam(): void {
    this.route.params.subscribe((param) => {
      this.dashboardId = param.dashboardId;
    });
    this.route.parent.params.subscribe((param) => {
      this.deviceId = param.deviceId;
    });
  }
}