CODEWITHSUNDEEP
angularrxjsreactive-programmingobservable
Saurabh Tiwari
Saurabh Tiwari

Reputation: 5131

Unable to import 'Rx' to my Angular 2 application

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

Upvotes: 3

Views: 6559

Answers (7)

Verri
Verri

Reputation: 1608

In angluar 4+:

import * as Rx from 'rxjs/Rx';

Rxjs documentation is still wrong, after fix this.

Reactive Manual Installation

Upvotes: 0

Nickos
Nickos

Reputation: 101

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); });

Upvotes: 0

Evan Plaice
Evan Plaice

Reputation: 14140

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.

Upvotes: 0

Joe Keene
Joe Keene

Reputation: 2351

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.

Upvotes: 0

martin
martin

Reputation: 96891

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.

Upvotes: 0

Ketan Akbari
Ketan Akbari

Reputation: 11257

You import rxjs like this.

import Rx from 'rxjs';

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

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

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58523

If you want to add interval ,

import { Observable } from 'rxjs/Observable';

return Observable.from(this.users);

You can do this , this way.

Upvotes: 0

Related Questions