Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

getting rxjs errors when referencing latest rxjs

I am using this tutorial https://egghead.io/lessons/rxjs-creating-an-observable which is referencing 2.5.2 rxjs version.

I am referencing the latest rx.umd.js from [email protected]" npm package <script src="node_modules/rxjs/bundles/rx.umd.js"></script> And here is the code I am trying to run:

console.clear();

var source = Rx.Observable.create(function(observer){
    setTimeout(function() {
        console.log('timeout hit');
        observer.onNext(42);
        observer.onCompleted();
    }, 1000);

    console.log('started');
});

var sub = source.subscribe(function(x) {
    console.log('next ' + x);
}, function(err) {
    console.error(err);
}, function() {
    console.info('done');
});

setTimeout(function() {
    sub.dispose()
}, 500);

Here is a console output I am getting.

Console was cleared
script.js:10 started
script.js:22 Uncaught TypeError: sub.dispose is not a function
script.js:5 timeout hit
script.js:6 Uncaught TypeError: observer.onNext is not a function

plunker: https://plnkr.co/edit/w1ZJL64b8rnA92PVuEDF?p=catalogue

Is rxjs 5 api is much different from rxjs 2.5 and observer.onNext(42); and sub.dispose() is not longer supported?

like image 662
sreginogemoh Avatar asked Apr 14 '16 03:04

sreginogemoh


1 Answers

Update 2018/12:

RxJS v6.x introduced a new, more "functional" API. Take a look at the 5>6 migration guide for more info. The original example code still works, but you'll have to import the of operator like so:

// ESM
import { of } from 'rxjs'
// CJS
const { of } = require('rxjs');

Original RxJS 5 answer:

That's right. RxJS 5 was rewritten to improve performance and also conform to the ES7 Observable spec. Check out the RxJS 4->5 migration page on Github.

Here's a working example:

// Create new observable
const one = Observable.of(1,2,3);

// Subscribe to it
const oneSubscription = one.subscribe({
    next: x => console.log(x),
    error: e => console.error(e),
    complete: () => console.log('complete')
});

// "Dispose"/unsubscribe from it
oneSubscription.unsubscribe();

A lot of methods got renamed, but the API itself is very easy to transition to.

like image 79
eldarshamukhamedov Avatar answered Oct 03 '22 09:10

eldarshamukhamedov