If you’re working with Angular and want to use RxJS, you’ll need to import the right module. Sometimes, though, tslint throws an error and blocks the import entirely.

Importing modules from RxJS

Say we want to work with an Observable. We’d write something like:

import { Observable } from 'rxjs/Rx';

Looks reasonable. But it throws: This import is blacklisted, import a submodule instead (import-blacklist).

The reason? Importing rxjs/Rx actually pulls in the entire Rx.js file from node_modules/Rx/Rx.js. Open that file and you’ll see it requires all of Rx’s functionality. Everything. The whole lot.

Fixing the error

You don’t need all of that. The linting error forces you to import only what you actually use. In this case, just Observable:

import { Observable } from 'rxjs/Observable';

Always import only the specific pieces you need from RxJS. It keeps your bundles smaller and your linter happy.

import-blacklist rule

If you’re curious, check the tslint.json file created by the angular-cli for your project. You’ll find this:

"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.