0

Im developing a small app with angular2 and I installed Rxjs 5. In every tutorial there is a diffrent way to import the Rxjs libary. The code to import in angular2 web is not working; I mean that Websotrm doesn't recognize Observable or any of its functions (from,subscribe,...).

  1. What do I need to do to fix that?
  2. If I import everything from Rxjs, does the load of the website will be slower? (I won't have more then 2- classes)
  3. (Webstorm question) How to I make webstorm to autocomplete the name of the functions with out pressing alt+space
2
  • Try scaffolding your app with angular-cli, and it will make rxjs available by default. You just need to import it into your component.
    – KB_
    Jul 15, 2016 at 2:24
  • I got too much errors while using angular-cli. so I moved to the basic seed project angular team published. How does the angular cli does import it?
    – Stav Alfi
    Jul 15, 2016 at 11:17

2 Answers 2

1

The latest RXJS distributions offer broken up modules to mitigate the gigantic filesize, à la Lodash. Importing rxjs/Rx (as another answer suggests) will get you the entirety of the library and isn't suggested.

Instead, import methods and operators individually:

  • for core classes, import the class from its scoped module: import { Observable } from 'rxjs/Observable'
  • for instance methods, use the instance scope in the "add" scope: import 'rxjs/add/observable/fromEvent' (note there is no destructured object to import – the method is added automatically by the import)
  • for operators, import from the add/operator scope: import 'rxjs/add/operator/switchMap'

Importing an operator once makes it available to all instances, so it's recommended to gather all the parts you use in a single file and import that file wherever needed, I.E. by re-exporting the instances you use.

import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/flatMap';
import 'rxjs/add/operator/switchMap';

export { Observable, BehaviorSubject };
0
  1. This works in my projects: import {Observable, Subject} from "rxjs/Rx";

  2. You only need to add Rx.umd.min.js from rxjs/bundles. It's about 170KB.

  3. Try upgrading to WebStorm 2016.2. I am using that version and it works fine (provided you have the correct imports) Has better support for Angular 2 in general. See change notes. I virtually never use Ctrl+Space. Tip: Set the Autopopup code completion value (Settings, Editor, Code Completion) to a very low delay.

2
  • Thanks for the response. How and where do I add Rx.umd.min.js? And I have Webstrom 2016.2 and How can I change the delay of the code cmpletion? it is very slow.
    – Stav Alfi
    Jul 15, 2016 at 11:16
  • Pay attention to import from rxjs/Rx, as it will import all the observable types and it's operators, which will sum up in compiled app space. The import statement for the observable and subject types is rxjs/[type] operators import statement are based on static and instance imports Jun 26, 2017 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.