Resolving 'import is blacklisted' tslint error for RxJS and Angular

If you're working with Angular applications and would like to utilise RxJS you need to import the appropriate module to your app but sometimes you may be presented with a tslint error, forbidding you to do the import.

Importing modules from RxJS

Let's say that we'd like to work with an Observable, so we'd do something along the lines of:

import { Observable } from 'rxjs/Rx';

This looks like a reasonable approach. However this will throw an error: This import is blacklisted, import a submodule instead (import-blacklist).

The reason for this linting error is because importing rxjs/Rx would actually import the Rx.js file (node_modules/Rx/Rx.js) and if we open up that file, we'll see that it requires all the Rx functionality.

Fixing the error

This is not necessary, so we get the linting error which forces us to import exactly what we need; To fix this lint error we need to import specific packages, in our case this would mean to only import Observable:

import { Observable } from 'rxjs/Observable';

For good measure, always remember to import only the bits and pieces that you need from RxJS.

import-blacklist rule

If you're curious you can check the tslint.json created for your project (if it was created via the angular-cli) and find the following option:

"import-blacklist": [
  true,
  "rxjs",
  "rxjs/Rx"
],

As you can see both the `rxjs` and `rxjs/Rx` imports are blacklisted. Please **do not** modify the linter configuration to fix the error, fix the code instead.