Should I use "import" rxjs / Rx "and" import {Observable} from "@ rxjs / Observable"
import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/observable/throw';
@Component({});
export shellModule{}
This is a piece of code in my Angular app that I copied from somewhere (I removed the definitions in the exported module. I am using it to create a service to call the APIs.
When importing in this particular file for some reason that the Observable is imported separately even though all rxjs are imported . If a particular module is imported in its entirety, why is a separate object imported from it separately? I tried asking this question on the forum where I got it from, but there was no answer. I want to understand if this helps in optimizing the code.
source to share
Generally:
In Typescript, modules are handled , will either require loading in the entire library using import * as rx from 'rxjs/Rx'
, or a specific exported module in the library to use it, so the compiler loads the types.
Reducing imports only to specific modules needed to customize your application to use tree shaking from Angular AOT compilation . This is not done by the typescript compiler, but by a tool called rollup . So it can help with optimizing the code later, but it doesn't automatically do it.
In terms of compilation overhead, casting the entire library can slow down the compiler a bit ... but that's not a very strong point, except for massively complex libraries.
I personally prefer to import into specific modules because it makes the calling code a little cleaner, since I don't have to use that global name to get a specific name. rx.Observable
vs Observable
. A good example of this is the lodash library (rxjs is a little more complex ...)
Honestly, importing entire libraries like the line you're in there: import 'rxjs/Rx'
doesn't make sense to me. You should only import certain exported modules. Try removing it, see what errors you get, then use the syntax * as rx
.
As far as rxjs is concerned - this is a bit awkward if you want to import certain operators , like this question - so to get specific operators: import 'rxjs/add/observable/from'
- but that also requires interfering with your webpack as stated in the answer to the question .
source to share
See what the module exports rxjs/Rx
:
export { Subject, AnonymousSubject } from './Subject';
export { Observable } from './Observable';
export { Operator } from './Operator';
export { Observer } from './Observer';
export { Subscription } from './Subscription';
export { Subscriber } from './Subscriber';
export { AsyncSubject } from './AsyncSubject';
export { ReplaySubject } from './ReplaySubject';
export { BehaviorSubject } from './BehaviorSubject';
...
import './add/observable/bindCallback';
import './add/observable/bindNodeCallback';
import './add/observable/combineLatest';
...
So it exports classes RxJs
as well as imports statements from the folder add
. So you can see it is loading everything in the library. However, it does not export any global object. Therefore you need to use named export like this:
import * as Rx from 'rxjs/Rx'
to be able to use the exported class:
Rx.Observable.of(12, 3);
This emulates what you would have if you loaded the library using a package - a global object Rx
:
<script src="rxjs/bundles/Rx.js">
If you want to use Observable
without a Rx
global object, you need to import it separately:
import { Observable } from '@rxjs/Observable';
Observable.of(1);
Importing as
import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';
not good practice, but can be used if you don't want to import each operator separately.
Also see How to Import Operators from a Package CorrectlyRxJs
.
source to share