Unable to import 'Rx' to my Angular 2 application

Question

I am pretty new at Angular2. I am trying to learn it using a dummy app.

I have recently gone through a tutorial on RxJS and got a basic hold on Observables (or atleast I assume so). Based on that, I have an idea of returning a list of users from my array in service as a stream. I intent to use interval for it and display a kind of lazy loading effect on screen.

My intention is something like:

getUsers() {
        return Rx.Observable.from(this.users); //want to add interval too on this 
    }

However, I am stuck at importing 'Rx' in to my service. Using 'Rx' without import obviously gives me error. The rest imports for Observables and operator works fine.

I went to node_modules and found there is a rx and a rxjs module too. But somehow using any of these below commands, I can't get rid of my error on Rx .

import 'rxjs/Rx';
import  Rx from 'rxjs/Rx';
import { Rx} from 'rx/Rx';
import { Rx} from 'rx';

I went through few links on SO those say Rx is no longer bundled with Angular. However, I am working with the latest angular official seed and I do see rx and rxjs packages. I have a 5.0.1 version mentioned in package.json . Am I assuming something wrong here ??

Please let me know How does one work with creating custom observables using Rx in Angular 2.

Note: I have no issues working Observable return by Http service, just want to create a Observable from scratch using Array

Answer 1

If you want to add interval ,

import { Observable } from 'rxjs/Observable';

return Observable.from(this.users);

You can do this , this way.

Answer 2

The rxjs should be already as a dependency in your project. You can read how to properly import RxJS on its official readme page: https://github.com/ReactiveX/rxjs/#installation-and-usage

Most easily just use:

import {Observable} from 'rxjs';

Note that this is different to using just import {Rx} from 'rxjs'; because this would look for an exported property called Rx in the rxjs/Rx.d.ts but no such property exists.

The rx package is the old RxJS 4 so you definitely don't want to use it with Angualr2.

Answer 3

You import rxjs like this.

import Rx from 'rxjs';

And in systemjs.config.js file place like this.

 rxjs: {
    defaultExtension: 'js',
      main: 'Rx.js'
  }

Answer 4

Make sure in your system.config.js that your config object has the below:-

var map = {
    'rxjs': 'node_modules/rxjs'
}

var packages = {
    'rxjs': {defaultExtension: 'js'}
}

System.config({
    map: map,
    packages: packages
});

Inside your component you should just need to do import 'rxjs/Rx'; and you will be able to use anything in rxjs or you can do import { Observable } from 'rxjs/Observable'; etc.

Answer 5

If everything looks perfect in your code, it's probably a System.js compatibility issue

1. Uninstall rxjs
2. Check map for the list of Angular dependencies
3. Install the exact same version of rxjs that Angular is using

For some reason, if the version you install and the version Angular is using are different, rxjs imports may break.

Source: I just ran into the same issue.

Answer 6

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/takeWhile';

import this in your component and then wrap the below code into a function to achieve what you want

Observable
      .interval(100)
      .takeWhile(x => x < 10)
      .subscribe(x => { console.log(x); });

Answer 7

In angluar 4+:

import * as Rx from 'rxjs/Rx';

Rxjs documentation is still wrong, after fix this.

Reactive Manual Installation