DebounceTime не является функцией — хотя я импортирую, почему тогда возникает эта ошибка?

Question

[9karamba]

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));
  }
}

Ошибка:
Uncaught (in promise): TypeError: this.titleFilter.valueChanges.debounceTime is not a function
TypeError: this.titleFilter.valueChanges.debounceTime is not a function

Comments

[Антон Швец]

не указали какая версия rxjs

[9karamba]

Антон, "rxjs": "^6.2.2", "rxjs-compat": "^6.2.2"

Answer 1

[Антон Швец]

используйте

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

не надо применять устаревший формат, даже с помощью rxjs-compat, она призвана поддерживать старый код, а не писать с помощью нее новый.

Answer 2

[Дмитрий Еремин]

Была такая же история
помогло добавление строки в раздел импортов

///<reference path="../../../../../node_modules/rxjs/operator/debounceTime.d.ts"/>

Как это работает - хз. Возможно, вам придется подредактировать путь до файла

Comments

[9karamba]

Путь подредактировала и проверила, к сожалению не помогло(