Argument of type 'Observable<void>' is not assignable to parameter of type 'OperatorFunction<unknown, unknown>

Question

I am trying to import the RxJS operators and I understand the merge error. It tells me the error that I have described in the title. I have gone through the RxJS documentation on the Merge but have not found anything to fix it. As I have read now to concatenate the observables you have to use the pipe, I suppose that the code is fine.

I leave the code of my Service

import { Component, OnInit } from '@angular/core';
import { Wine } from 'src/app/model/wine';
import { Observable } from 'rxjs';
import { WineService } from 'src/app/services/wine.service';
import { WineQuantityChange } from 'src/app/model/wineQuantityChange';
import { Subject } from 'rxjs';
import { startWith, debounceTime, distinctUntilChanged, merge, switchMap } from 'rxjs';


@Component({
  selector: 'app-winelist',
  templateUrl: './winelist.component.html',
  styleUrls: ['./winelist.component.css']
})
export class WinelistComponent implements OnInit {

  public wines$: Observable<Wine[]>;
  public searchTerm: string = '';

  private searchSubject: Subject<string> = new Subject();
  private reloadWineList: Subject<void> = new Subject();

  constructor(private wineService: WineService) { }

  ngOnInit(): void {
    this.wines$ = this.searchSubject.pipe(
        startWith(this.searchTerm),
        debounceTime(300),
        distinctUntilChanged(),
        merge(this.reloadWineList),
        switchMap((query) => this.wineService.getWines(this.searchTerm))
    );
  }

}

Answer 1

The import that you are using 'rxjs' is the static methode, in your case you need to use the instance methode. This is located on 'rxjs/operators'

import { merge } from 'rxjs/operators';