angular2 Observable Property 'debouceTime'

Question

I use "angular2 webpack" and "angular2/form,Observable" , but met an error ,need help ..

There is a custom form validator --

import {Observable} from 'rxjs/Rx';
import {REACTIVE_FORM_DIRECTIVES,FormControl, FormGroup, Validators} from '@angular/forms';

emailShouldBeUnique(control:FormControl) {
    return new Observable((obs:any)=> {
      control.valueChanges
        .debouceTime(400)
        .distinctUntilChanged()
        .flatMap(term=>return !this.userQuery.emailExist(term))
        .subscribe(res=> {
            if (!res) {obs.next(null)}
            else {obs.next({'emailExist': true}); }; }
        )});}

I could find the file "/projection_direction/node_modules/rxjs/operator/debounceTime.js"

why is there such the error--

Property 'debouceTime' does not exist on type 'Observable'.

Answer 1

For me, the answer was using the pipe:

.pipe(debounceTime(500))

Plus changing the import from:

import "rxjs/add/operator/debounceTime"; 

To:

import {debounceTime} from 'rxjs/internal/operators';

And yes, I was following a tutorial, so hopefully this helps

Answer 2

I had same problem recently, and solved after I did:

import { debounceTime } from 'rxjs/operators';

And also added pipe as it is required I think for Angular 5+

something.pipe(debounceTime(100)).subscribe(something...);

Answer 3

You have a typo here. It's debounceTime, not debouceTime :)

Answer 4

I recently had a similar error while working with angular v5.2.6 and rxjs v5.5.6 on an angular-cli 1.6.8 generated project. I originally had:

import { debounceTime, map } from 'rxjs/operators;

since I was subscribing for a control valueChanges event and I kept getting the error until I put

import { Observable } from 'rxjs/Rx';

I hope this helps!

Answer 5

Let's say you have to use debounceTime() with multiple RxJS operators, I would suggest use .pipe() operator

import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

 functionName(value: Observable<string>) {
    return .pipe(
      debounceTime(400),
      distinctUntilChanged(),
      switchMap(location => this.secondFunc(value))
    )
  }

Answer 6

For everyone coming here after rxjs 6:

You now need to use a pipe():

What was

myObservable$
    .debounceTime(500)
    .subscribe(val => {
    // debounced stuff
})

needs now to be:

myObservable$
    .pipe(debounceTime(500))
    .subscribe(val => {
    // debounced stuff
})

https://www.learnrxjs.io/operators/filtering/debouncetime.html