What is the tslint blacklist and why does angular-cli default rxjs on the list in tslint.json?

Question

By default with an angular-cli project the tslint settings come packed with things that go squiggle. I recently was approached by a new developer that I had configure their tslint instance in Atom.

I was asked about the following line:

import { Observable, BehaviorSubject } from 'rxjs';

The TSLinter is saying that rxjs is blacklisted. I went to the tslint.json file and, sure enough, it was listed.

What is this blacklist and does it protect the app from something?

Why is rxjs added to the list by default?

Under what conditions should I be adding something else to it?

---

I'd like to point out that I know how to 'fix' the problem ::

import { Observable } from 'rxjs/observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

The question still lies in the meaning of the Blacklist in the context of TSLint.

Answer 1

This is because you should (at least in browser apps) never include from 'rxjs' and always use more specific for example 'rxjs/Observable' or 'rxjs/BehaviorSubject'.

When you include 'rxjs' you're in fact including this file: https://github.com/ReactiveX/rxjs/blob/master/index.js which includes the entire bundled RxJS library (all operators, schedulers, etc.). So you're including a lot of things you don't even use and your app grows bigger than necessary (I think tree-shaking with webpack2 doesn't help and once the code is included it'll be part of the final package, but I might be wrong).

I think it's ok to import directly from 'rxjs' in node apps (eg. backend apps) where it doesn't matter that much that it contains also code you're not going to use and this way is just easier to use.

Answer 2

The reason for it is because of the change in the tslint.json as they dont want the whole module of rxjs to be loaded on Angular Application as it makes it heavier in dependency loading. Instead load only sub modules which are necessary for your application.

To solve it, change

import { Observable, BehaviorSubject } from 'rxjs';

to:

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

Answer 3

This link explains a little more clearly:

https://fullstack-developer.academy/resolving-import-is-blacklisted-tslint-error-for-rxjs-and-angular/

Essentially, when you import like

import { Observable, BehaviorSubject } from 'rxjs';

or

import { Observable, BehaviorSubject } from 'rxjs/Rx';

it pulls in Rx.js which will import EVERYTHING (Observable, BehaviorSubject, ReplaySubject,Subscriber, Subscription, etc...) in the rxjs library which is a lot more dependencies than you are actually after. Unless you really need to use most of these in the file you are importing in, you are better off importing each dependency on its own line like

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

This results in fewer dependencies being pulled in and hopefully a smaller compiled filesize.