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.

Saintsimonianism

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.

Olympus

agreed...but not exactly an answer to my question(s)...looking for more clarity on the tslint 'blacklist' – Saintsimonianism

The blacklist option blacklists an import and gives you warning when you try to use it. I guess that's why it's called blacklist... palantir.github.io/tslint/rules/import-blacklist. Of course you can remove it and your app will work. – Olympus

That link is informative. For some reason my searches weren't pulling it up. So this would be a good 'tool' to use as long as all the devs on the project are minding the tslint settings. I'll be sure it gets enforced and if we start including other projects like underscore, to consider it part of the same family. – Saintsimonianism

Apparently, this is no longer correct: github.com/angular/devkit/issues/585#issuecomment-377845078 – Errata

As of Angular 11, the only thing blacklisted when you add rxjs to your project is rxjs/Rx. I think it would be wise to also add rxjs' and 'rxjs/internal, the latter because it's a common auto import problem mostly with subscriptions in VSCode, but that's not the droid you're looking for probably ever, so it would help guard against that as well. – Threshold

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';

Ayr

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.

Huxley