4

Previously I was able to import only used operators with this code:

import 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/finally';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/throw';

This generates a small bundle (vendor.ts).
How to do this with RxJS without requiring rxjs-compat?
Changing the code above to import 'rxjs'; generates a bigger bundle.

UPDATE:

I followed all the answers you've posted but nothing works well. This is my updated vendor.ts:

import 'rxjs/Observable';
import 'rxjs/Subscription';
import 'rxjs/Subject';
import 'rxjs/observable/throw';
import 'rxjs/operators/map';
import 'rxjs/operators/mergeMap';
import 'rxjs/operators/catchError';
import 'rxjs/operators/finalize';

I also tried using 'rxjs/add/operator/*'.

This is how I'm importing rxjs:

import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';
import {Subject} from 'rxjs/Subject';
import {_throw} from 'rxjs/observable/throw';
import {map} from 'rxjs/operators/map';
import {mergeMap} from 'rxjs/operators/mergeMap';
import {catchError} from 'rxjs/operators/catchError';
import {finalize} from 'rxjs/operators/finalize';

I changed my Webpack 3 configuration according to this document (https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking) and nothing works.

Finally, take a look at the Webpack Bundle Analyzer result:

enter image description here

The bundle includes all operators. I found this related issue: https://github.com/angular/angular-cli/issues/9069

Sandro Simas
  • 1,268
  • 3
  • 21
  • 35
  • rxjs-compat is intended exactly for this purpose. – Estus Flask May 18 '18 at 17:01
  • @estus, but would not this library just be used to maintain compatibility with older versions? How to use this in the new way? Does not this exist without rxjs-compat? – Sandro Simas May 18 '18 at 17:16
  • That's the way it provides compatibility with older versions. By providing old import style. – Estus Flask May 18 '18 at 17:20
  • @estus, but how to use only the new way, but reducing vendor size? – Sandro Simas May 18 '18 at 17:31
  • Same way as you would do with RxJS 5. https://stackoverflow.com/questions/42376972/best-way-to-import-observable-from-rxjs . rxjs-compat needs to be installed, but you don't need to `require` it. – Estus Flask May 18 '18 at 17:55

4 Answers4

4

rxjs-compat is supposed to be installed together with rxjs, it provides the support for old-style imports.

It's possible to use RxJS 6 the same way as RxJS 5:

import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

This compatibility layer is expected to be removed in RxJS 7.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Using this way will result in a smaller bundle? – Sandro Simas May 18 '18 at 21:07
  • This is same as in RxJS 5. Importing `Observable` from `rxjs/Observable` is how it's done (not from `rxjs/Rx`, never `import 'rxjs'` because omitted `from` results in importing the package entirely). – Estus Flask May 18 '18 at 21:13
  • please check my update in the question. Nothing works fine. – Sandro Simas May 19 '18 at 04:16
  • I guess the problem is likely related to your build and not RxJS. Yes, the problem may be in Webpack. Usually RxJS 6 is used as a prerequisite with Angular 6. Why is Webpack 3 is in use? Did you try to switch to 4? – Estus Flask May 19 '18 at 11:25
  • I had a lot of headaches to switch to Webpack 4 in the past, but I'm trying to update now. – Sandro Simas May 19 '18 at 13:58
2

The issue for me was that I had module set to commonjs in tsconfig.json. It needs to be set to es6, because webpack needs es6 modules in order for it to be able to do tree shaking.

See more info in: https://webpack.js.org/guides/tree-shaking/

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export...

...

  • Use ES2015 module syntax (i.e. import and export).
  • Ensure no compilers transform your ES2015 module syntax into CommonJS modules
Sámal Rasmussen
  • 2,887
  • 35
  • 36
1

Now You need to import functions that You want to use.

Never use

import from 'rxjs'

Use with destructuring

import { Observable } from 'rxjs'

Import operators from 'rxjs/operators'

Static functions from 'rxjs'

So, for example, you need to use operator 'map' you will import it

import { map } 'rxjs/operators';

And then you use it with pipe

observable.pipe(map(() => { some function }))

For better understanding read Migration Guide or watch awesome video from ng-conf

David Walschots
  • 12,279
  • 5
  • 36
  • 59
alexKhymenko
  • 5,450
  • 23
  • 40
  • I'm using this way, but the problem is that all operators will be included in the final bundle. – Sandro Simas May 18 '18 at 20:20
  • If You use import 'rxjs'; yes but you should use import { operator} from 'rxjs/operators' – alexKhymenko May 19 '18 at 02:26
  • please check my update in the question. Nothing works fine. – Sandro Simas May 19 '18 at 04:16
  • @SandroSimas in your update you indicate you still have all kinds of other imports of rxjs in a `vendor.ts` file. You're also importing operators using the old (RxJS 5) way. This answer is in fact correct. You should probably remove any reference to rxjs from your `vendor.ts` file and modify your imports throughout the application. – David Walschots May 20 '18 at 19:46
1

You just need this two-part of code:

Import { filter, map } from "rxjs/operators"

In this list, you can add any operator that you need to use.

Import { Observable } from "rxjs"
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Милош Вељковић
  • 187
  • 7