In the Ionic documentation, it is highlighted that:
RXJS 5.5.2 Updates
The most recent RXJS update involves a change in how operators are applied.
Previously, operators were implemented like this:
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/switchMap';
export MyClass {
someMethod(){
// Using Reactive Forms
this.input.valueChanges
.debounceTime(500)
.switchMap(inputVal => this.service.get(inputVal))
.subscribe(res => console.log(res))
}
}
This method required modifying the Observable prototype and patching on the methods.
With the release of RXJS 5.5, a new approach using lettable operators has been introduced, which can result in significantly smaller code bundles.
To utilize lettable operators, the previous code needs to be adjusted as follows:
// Use Deep imports here for smallest bunlde size
import { debounceTime } from 'rxjs/operators/debounceTime';
import { switch } from 'rxjs/operators/switchMap'; // <- Please read the update!
export MyClass {
someMethod(){
// Using Reactive Forms
// We use the new `.pipe` method on the observable
// too apply operators now
this.input.valueChanges
.pipe(
debounceTime(500),
switchMap(inputVal => this.service.get(inputVal))
)
.subscribe(res => console.log(res))
}
}
This minor adjustment allows importing only the necessary operators in our code, resulting in a smaller, faster application. This example demonstrates the use of Deep Imports, enabling isolation of the imported module.
Therefore, by slightly altering the import statement to incorporate deep imports:
import { debounceTime } from 'rxjs/operators/debounceTime';
And then utilizing debounceTime within the pipe(...) method:
this.input.valueChanges
.pipe(
debounceTime(500),
// additional operators can be chained if needed ...
// ...
)
.subscribe(res => console.log(res))
Although the old method can still be used (as it's not yet a breaking change), switching to lettable operators will optimize the application, making it smaller and faster.
UPDATE
As pointed out by @lifetimes in their comment (and corroborated here), the import statement:
import { switch } from 'rxjs/operators/switchMap';
should be replaced with:
import { switchMap } from 'rxjs/operators/switchMap';
when working with newer versions.