TypeError: search.valueChanges.debounceTime is not a function

I am just learning angular2. At the time of applying something at input changes, I am getting the error.

app.ts:

export class AppComponent {
    form: ControlGroup;

    constructor(fb: FormBuilder) {
        this.form = fb.group({
            search: []
        });

        var search = this.form.find('search');
        search.valueChanges
            .debounceTime(400)
            .map(str => (<string>str).replace(' ','‐'))
            .subscribe(x => console.log(x));
    };

 }

Error:

How to solve this? Am I missing something?

http://plnkr.co/edit/MQIQvFYAvsPv9Pu8xZap?p=preview">Plunker Demo

N.B. I cannot produce anything at plunker as I am writing angular2 first time at plunker now. I have written only my app.ts code at plunker. I have showed the screenshot of error from my local pc. I will be grateful too if you tell me the way of running angular2 project at plunker.

you Just need to import these to remove your error. You are getting runtime error because Observables by default come with just a few operators. You have to explicitly import them like this -

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';

Working example

Update

Angular 6 onwards, debounceTime is imported as following -

import { debounceTime } from 'rxjs/operators';

other imports you can import from this path are -

• switchMap
• tap
• map
• distinctUntilChanged

etc..

Put debounceTime(400) inside a pipe() function.

example

var search = this.form.find('search');
    search.valueChanges
        .pipe(debounceTime(400))
        .map(str => (<string>str).replace(' ','‐'))
        .subscribe(x => console.log(x));

Two things:

add imports for each operator

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

and then use pipes to pass all the RxJS operators

    this.searchTextInput.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
      )
      .subscribe((term): void => {
        console.log({ term });
      });

You can try:

import { debounceTime } from 'rxjs/operators';