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

Viewed 5880

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.

3 Answers

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.

Related