-
-
Save MichalZalecki/d78c52ec55d7ec7b53f7 to your computer and use it in GitHub Desktop.
// Import all | |
import Rx from "rxjs/Rx"; | |
Rx.Observable | |
.interval(200) | |
.take(9) | |
.map(x => x + "!!!") | |
.bufferCount(2) | |
.subscribe(::console.log); | |
// Add operators (my favourite) | |
import {Observable} from "rxjs/Observable"; | |
import "rxjs/add/observable/interval"; | |
import "rxjs/add/operator/take"; | |
import "rxjs/add/operator/map"; | |
import "rxjs/add/operator/bufferCount" | |
Observable | |
.interval(200) | |
.take(9) | |
.map(x => x + "!!!") | |
.bufferCount(2) | |
.subscribe(::console.log); | |
// JavaScript ES7 Function Bind Syntax | |
import {Observable} from "rxjs/Observable"; | |
import "rxjs/add/observable/interval"; | |
import {take} from "rxjs/operator/take"; | |
import {map} from "rxjs/operator/map"; | |
import {bufferCount} from "rxjs/operator/bufferCount" | |
Observable | |
.interval(200) | |
::take(9) | |
::map(x => x + "!!!") | |
::bufferCount(2) | |
.subscribe(::console.log); |
Why do I have access to interval and take by simply importing import {Observable} from "rxjs/Observable";
?
@kamok you could import {Observable} from "rxjs/Rx";
but in this way you bundle entire Rx into your project.
In my case (Angular 4 application generated by @angular/cli) I used that syntax:
import * as Rx from "rxjs/Rx";
Because I get error:
Module '"/Users/piecioshka/projects/angular-rxjs-race-condition-problem/node_modules/rxjs/Rx"' has no default export.
Dont use import * from Rx
, this brings in the entire library.
Better method as described in https://loiane.com/2017/08/angular-rxjs-imports/
rxjs-operators.ts
// Observable class extensions
import 'rxjs/add/observable/of';
// Observable operators
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
app.module.ts
import './rxjs-operators';
You won't need to import anywhere else in your application now
@briancodes Thanks, you have the best solution.
We should all be moving to this https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md for all the reasons listed in the article under 'Why?'
@briancodes
As per your suggestion,
app.module.ts
import './rxjs-operators';
You won't need to import anywhere else in your application now
Following your suggestion, If now I am using 'map' operator in some component.ts file, it asks for importing library for map operator.
Other point is that, If I am using on map and do operator in my application using import 'rxjs/add/operator/map',
it includes the whole operator library in the build.
Thank you for your help!
Can you update this for RXjs 6 ?
@zemd, yes it does. Thank you!