Clever Geek Handbook

Failed to import "Rx" into my Angular 2 app

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

I recently read an RxJS tutorial and got basic Observables hold (or so I guess). Based on this, I have an idea to return a list of users from my array as a stream. I intend to use spacing for this and display a kind of lazy loading effect on the screen.

My intention is something like:

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

However, I am stuck importing "Rx" into my service. Using "Rx" without import is clearly giving me an error. The rest of the imports for Observables and operator work are fine.

I went to node_modules and found that there is a module rx

and rxjs

. But somehow using any of these below commands I cannot 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 have looked at several links on SO that say rx

no longer related to Angular. However, I am working with the latest official angular seed and I can see packages rx

and rxjs

. I have the version 5.0.1

listed in package.json

. I am assuming there is something wrong here?

Please let me know How to work with creating custom observables using rx

angular 2.

Note. I have no problem with work. Observable return by Http service, just want to create Observable from scratch using array

+3


source to share


7 replies


If you want to add spacing,

import { Observable } from 'rxjs/Observable';

return Observable.from(this.users);


You can do it this way.

0


source


rxjs

should already be dependent in your project. You can read how to import RxJS correctly on the official readme page: https://github.com/ReactiveX/rxjs/#installation-and-usage

Most easy to use:

import {Observable} from 'rxjs';


Note that this differs from usage only import {Rx} from 'rxjs';

because it would look for the exported property Rx

in rxjs/Rx.d.ts

, but there was no such property.

The package Rx

is old RxJS 4, so you definitely don't want to use it with Angualr2.

0


source


You import rxjs like this.

import Rx from 'rxjs';

And in the file, systemjs.config.js

do the following.

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


source


Make sure in your system.config.js file your config object has the following: -

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

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

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

Inside your component, you just need to do import 'rxjs/Rx';

and you can use anything in rxjs or can do import { Observable } from 'rxjs/Observable';

etc.

0


source


If everything looks perfect in the code, there may be a System.js compatibility issue

  • Remove rxjs
  • Check map

    for list of Angular dependencies
  • Install the same rxjs version that Angular uses

For some reason, if the version you are installing and the Angular version in use are different, the rxjs import might break.

Source: I just ran into the same problem.

0


source 


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

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

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


source


Corner 4 +:

import * as Rx from 'rxjs/Rx';

Rxjs documentation still doesn't work after fixing it.

Manual reactive installation

0


source






More articles:


All Articles