Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
@zemd

This comment has been minimized.

Copy link

zemd commented Jan 9, 2017

Also important to notice that to import race operator which will be used out of observable's scope, you should use raceStatic.

For example,

import {raceStatic} from "rxjs/operator/race";

raceStatic(
    Observable.fromEvent(element1, "event1"),
    Observable.fromEvent(element2, "event2")
  )
.map(...);

Spent extra hour to find out how to use it (( hope this help someone.

@gruppjo

This comment has been minimized.

Copy link

gruppjo commented Jan 24, 2017

@zemd, yes it does. Thank you!

@kamok

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner Author

MichalZalecki commented Jun 22, 2017

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

@piecioshka

This comment has been minimized.

Copy link

piecioshka commented Sep 5, 2017

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

This comment has been minimized.

Copy link

briancodes commented Dec 15, 2017

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

This comment has been minimized.

Copy link

mikerames commented Jan 28, 2018

@briancodes Thanks, you have the best solution.

@jpduckwo

This comment has been minimized.

Copy link

jpduckwo commented Feb 27, 2018

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

sorcamarian commented Jul 3, 2018

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
You can’t perform that action at this time.