0

I have a project written on Angular 5 and rxjs 5.5.5. how to correctly import it into Angular 6, rxjs 6.2.0? I can just write 'import {Observable,of, from } from 'rxjs';', but then i have a problem with 'merge' and 'fromEvent'

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/fromEvent';

Please help me solve this problem

senjust
  • 119
  • 1
  • 14
  • With RxJS 6 you should use pipable operators, see https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md – martin Oct 25 '18 at 08:59
  • You can also install `rxjs-compat` for backwards compatibility but it's better to upgrade and use the RxJS 6 style. – martin Oct 25 '18 at 09:01
  • Possible duplicate of [Angular 6 RXJS Import Syntax?](https://stackoverflow.com/questions/49811177/angular-6-rxjs-import-syntax) – ibenjelloun Oct 25 '18 at 09:01

1 Answers1

1

Checkout this migration document. Correct imports are:

import {
    Observable,
    fromEvent,
    merge
} from 'rxjs';
Ludevik
  • 6,954
  • 1
  • 41
  • 59
  • ok, but how can I solve the problem after that? `return Observable.merge(...displayDataChanges).map(() => { // Filter data this.filteredData = this._exampleDatabase.data.slice().filter((item: UserData) => { let searchStr = (item.name + item.color).toLowerCase(); return searchStr.indexOf(this.filter.toLowerCase()) != -1; });` – senjust Oct 25 '18 at 09:08
  • [ts] Property 'merge' does not exist on type 'typeof Observable'. – senjust Oct 25 '18 at 09:09
  • 2
    @senjust simply call `merge(...displayDataChanges).pipe(map());` instead of `Observable.merge(...displayDataChanges).map()`. – Quentin Fonck Oct 25 '18 at 09:54
  • 1
    read the migration guide, link to section about converting to pipe syntax: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#pipe-syntax – Ludevik Oct 25 '18 at 09:55
  • Thanks, with marge I solved the problem. Tell me please how to be with fromEvent: `Observable.fromEvent(this.filter.nativeElement, 'keyup') .debounceTime(150) .distinctUntilChanged() .subscribe(() => {...});` I try this way, but I have an error: `fromEvent(this.filter.nativeElement, 'keyup').pipe(debounceTime(150) .distinctUntilChanged() .subscribe(() => {...}));` – senjust Oct 25 '18 at 12:20
  • pipe function takes varargs, so you have to separate them with comma and not chain them: `fromEvent(this.filter.nativeElement, 'keyup').pipe(debounceTime(150), distinctUntilChanged()).subscribe` – Ludevik Oct 25 '18 at 12:30