DebounceTime is not a function - even though I'm importing, why does this error occur then?

Question

Angular

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Product, ProductService} from '../../services/product-service';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';

@Component({
  selector: 'auction-home-page',
  styleUrls: ['./home.css'],
  template: `
    <div class="row carousel-holder">
      <div class="col-md-12">
        <auction-carousel></auction-carousel>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <input placeholder="Filter products by title"
                 class="form-control" type="text"
                 [formControl]="titleFilter">
        </div>
      </div>
    </div>
    <div class="row">
      <div *ngFor="let product of products | filter:'title':filterCriteria" class="col-sm-4 col-lg-4 col-md-4">
        <auction-product-item [product]="product"></auction-product-item>
      </div>
    </div>
  `
})
export default class HomeComponent {
  products: Product[] = [];
  titleFilter: FormControl = new FormControl();
  filterCriteria: string;

  constructor(private productService: ProductService) {
    this.products = this.productService.getProducts();
    this.titleFilter.valueChanges
      .debounceTime(100)
      .subscribe(
        value => this.filterCriteria = value,
        error => console.error(error));
  }
}

Error:
Uncaught (in promise): TypeError: this.titleFilter.valueChanges.debounceTime is not a function
TypeError: this.titleFilter.valueChanges.debounceTime is not a function

Answer 1

use

import { debounceTime } from 'rxjs/operators';
//.....
.pipe(
  debounceTime(100)
)
//.....

don't use the legacy format, even with rxjs-compat, it's meant to support old code, not write new code with it.

Answer 2

Had the same story
, adding a line to the imports section helped
How it works - xs. You may need to edit the path to the file