Angular and RxJS imports

Question

I\'ve always known to import my Observable operators separately to limit the load times. However I\'ve noticed something today that I hope someone could please

Answer 1

Starting from WebStorm 2016.3 (I believe), you have an option to blacklist certain imports. Editor > Code Style > StypeScript

Do not import exactly from: [rxjs]

Additionally, there is a flag available in tslint to prohibit global imports:

{
  "rules": {
    "import-blacklist": [true, "rxjs"]
  }
}

Answer 2

Why not have a file(ex: rxjs-extensions.ts) with your required rxjs observable class extensions and operators?

// Observable class extensions
import 'rxjs/add/observable/throw';

// Observable operators
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

And then in your main module (ex app.module.ts) import from this file:

import './rxjs-extensions';

And in your main component (ex: app.component.ts) just import Observavle:

import { Observable } from 'rxjs/Rx';

This is how it is covered on the main angular tutorial.

Answer 3

You can use all operators by using this:

import * as Rx from "rxjs/Rx";

Rx.Observable.of(1,2,3,4,5);