How to use only a part of rxjs-compat, or write a custom rxjs-compat?

Question

We've updated our project to use Angular & Rxjs 6 and all works fine.

We've also updated the code to use the pipe operators, so we would like to drop rxjs-compat.
The only issue is that one of our dependencies still uses the old import syntax for Observable and Subject.

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

Is there any way to provide our own minimal rxjs-compat just for these two classes?

The library does not do anything fancy with Observable and Subject, and doesn't use any operators, so it seems overkill to import the full rxjs-compat package.

You might be able to do something using the `paths` setting in the `tsconfig.json` file's `compilerOptions` - that is, redirect `rxjs-compat` to someplace else - but I've never tried this with a dependency's dependencies. But does it really matter? Won't tree shaking effect the same result? — cartant, May 25 '18 at 20:35
@cartant tree-shaking doesn't seem to work with rxjs-compat. I've tried the `paths` trick you mentioned, but it didn't seem to have the effect I was expecting ... I'm probably doing something wrong — Dan Manastireanu, May 29 '18 at 13:49

cartant · Accepted Answer · 2018-05-30T03:26:32.577

I don't think you need to copy any files when using the paths option.

I'd try something like this:

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
        "rxjs/Observable": ["./node_modules/rxjs/internal/Observable"],
        "rxjs/Subject": ["./node_modules/rxjs/internal/Subject"]
    }
}

Note that baseUrl must be specified.

The question is whether or not the paths option affects other dependencies in node_modules. I'm not sure and I didn't try it.

score 0 · Answer 2 · answered May 29 '18 at 13:47

Using paths as metioned by @cartant I managed to get it to compile without rxjs-compat, but the output main.js is even larger than using the full compat library...

With rxjs-compat = 691 KB
With patched library import = 671 KB (ideal size)
with rxjs-compat paths hack = 700 KB

I've probably done something wrong, but I don't have time to investigate this further.

Steps for the hack:

Create a folder src\rxjs-compat\node_modules (note the node_modules name, it's used to bypass a webpack bug)
Copy the d.ts and .js files you need from rxjs-compat (in my case Observable and Subject)
Edit tsconfig.app.json and add the following paths in the compilerOptions: "paths": { "rxjs-compat/Observable": [ "rxjs-compat/node_modules/Observable"], "rxjs/Subject": [ "rxjs-compat/node_modules/Subject"] }

How to use only a part of rxjs-compat, or write a custom rxjs-compat?

2 Answers2