Skip to content

Instantly share code, notes, and snippets.

@MichalZalecki
Created March 12, 2016 12:24
Show Gist options
  • Save MichalZalecki/d78c52ec55d7ec7b53f7 to your computer and use it in GitHub Desktop.
Save MichalZalecki/d78c52ec55d7ec7b53f7 to your computer and use it in GitHub Desktop.
How to import RxJS 5
// 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);
@gruppjo
Copy link

gruppjo commented Jan 24, 2017

@zemd, yes it does. Thank you!

@kamok
Copy link

kamok commented Apr 25, 2017

Why do I have access to interval and take by simply importing import {Observable} from "rxjs/Observable";?

@MichalZalecki
Copy link
Author

@kamok you could import {Observable} from "rxjs/Rx"; but in this way you bundle entire Rx into your project.

@piecioshka
Copy link

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.

@briancodes
Copy link

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

@mikerames
Copy link

@briancodes Thanks, you have the best solution.

@jpduckwo
Copy link

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?'

@shikhaBasra
Copy link

shikhaBasra commented Apr 18, 2018

@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.

@sorcamarian
Copy link

Thank you for your help!
Can you update this for RXjs 6 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment