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
Stav Alfi
  • 13,139
  • 23
  • 99
  • 171
  • 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 '16 at 02: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 '16 at 11:17

2 Answers2

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 };
wosevision
  • 123
  • 11
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.

hholtij
  • 2,906
  • 6
  • 27
  • 42
  • 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 '16 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 – LookForAngular Jun 26 '17 at 16:37