Angular 6 upgrade: debounceTime is not property of Subject

Question

I am attempting to upgrade my app from Angular 5 to Angular 6. I followed the steps on the https://update.angular.io/ At least i think i did.

The Error is :

Property 'debounceTime' does not exist on type 'Subject<string>'.

Also my components lost the debounceTime import. I think the ng update removed it.

did you do the import like this: import {debounceTime} from 'rxjs/operators' ? — siva636, May 05 '18 at 15:58
Yeah. I added this statement : import { map, takeUntil, tap, debounceTime } from 'rxjs/operators'; — Logan_B, May 05 '18 at 16:01
Are you using `subject.debounceTime(...)` or `subject.pipe(debounceTime(...))` syntax? — Daniel W Strimpel, May 05 '18 at 16:03
ah, would it be something like this? this.userName$.pipe( .debounceTime(400) .distinctUntilChanged()) .subscribe(term => { — Logan_B, May 05 '18 at 16:35
this.userName$.pipe( debounceTime(400), distinctUntilChanged()) this isn't causing an error — Logan_B, May 05 '18 at 16:37
Yup, RxJS is moving away from the dot chaining in v6. @Logan_B looks correct... — Andrew Lobban, May 05 '18 at 16:39

score 18 · Accepted Answer · answered May 05 '18 at 16:46

18

I solved it with the help of @Siva636 and @Andrew Lobban.

I needed to use pipe:

  this.field$.pipe(
      debounceTime(400),
      distinctUntilChanged())

answered May 05 '18 at 16:46

Logan_B

527
1
7
22

@Logan_B I din't upgrade since. I still run the old version. I can't remember the error – May 30 '18 at 04:49

score 10 · Answer 2 · answered Sep 28 '18 at 14:06

As of Angular 6.1.8, just need to import and add pipe like below example

import {debounceTime} from 'rxjs/operators';

Then on field just before the observable subscribe method call pipe(debounceTime(1000)) like below:

emailControl.valueChanges.pipe(debounceTime(1000)).subscribe(value => this.setMessage(emailControl));

And that's it, it's just a updated answers of @tiago's answer - where she is defining const debouncetime - we don't really need to use const and pipe.

score 6 · Answer 3 · answered Jun 21 '18 at 09:39

Following the reactivex docs, you should also subscribe to the pipe observable :

.pipe(
    debounceTime(500),
    distinctUntilChanged(),
    map((val) => {
        ...
    })
)
.subscribe();

An Observable is called a “cold” Observable if it does not begin to emit items until an observer has subscribed to it.

score 1 · Answer 4 · answered Aug 09 '18 at 09:44

i am sorry for the delay but i just get this problem today and fixed like this. i solve this issue like this: first import like this:

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

Then create a const like this (i tried to do directly without duplicating pipe but didn´t work so i found this solution):

const debouncetime = pipe(debounceTime(1000));

And then use it before you subscribe for example i was doing an email validator with messages:

const emailControl = this.registerForm.get('email');
    emailControl.valueChanges
     .pipe(debouncetime)
     .subscribe(value => this.setEmailMessage(emailControl))

dont know if its the best solutions but it works perfectly. I hope it helps some one!

No need for the debouncetime variable, just do .pipe(debounceTime(1000)) — Moulde, Nov 02 '18 at 17:27

Angular 6 upgrade: debounceTime is not property of Subject

4 Answers4

Linked