Solvedangular Issue with importing Observable from rxjs/Rx (import-blacklisted)

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I was following this part of our official guide.

import { Observable } from 'rxjs/Rx'; // this line rises a tslint err
import { of } from 'rxjs/observable/of';

import blacklisted

ERR: [tslint] This import is blacklisted, import a submodule instead (import-blacklist)

Please shed some light on this issue.

Environment

Angular version: 5.0.0


Browser:
- [x] Chrome (desktop) version 62
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 6.11.1  
- Platform:  Linux, Windows.

other info

Just in case if you are interested in my tslint.json. (same as generated by ng new)

{
	"rulesDirectory": ["node_modules/codelyzer"],
	"rules": {
		"arrow-return-shorthand": true,
		"callable-types": true,
		"class-name": true,
		"comment-format": [true, "check-space"],
		"curly": true,
		"eofline": true,
		"forin": true,
		"import-blacklist": [true, "rxjs", "rxjs/Rx"], <<<<
		"import-spacing": true,
		"indent": [true, "tabs"],
		"interface-over-type-literal": true,
		"label-position": true,
		"max-line-length": [true, 140],
		"member-access": false,
		"member-ordering": [
			true,
			{
				"order": [
					"static-field",
					"instance-field",
					"static-method",
					"instance-method"
				]
			}
		],
		"no-arg": true,
		"no-bitwise": true,
		"no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
		"no-construct": true,
		"no-debugger": true,
		"no-duplicate-super": true,
		"no-empty": false,
		"no-empty-interface": true,
		"no-eval": true,
		"no-inferrable-types": [true, "ignore-params"],
		"no-misused-new": true,
		"no-non-null-assertion": true,
		"no-shadowed-variable": true,
		"no-string-literal": false,
		"no-string-throw": true,
		"no-switch-case-fall-through": true,
		"no-trailing-whitespace": true,
		"no-unnecessary-initializer": true,
		"no-unused-expression": true,
		"no-use-before-declare": true,
		"no-var-keyword": true,
		"object-literal-sort-keys": false,
		"one-line": [
			true,
			"check-open-brace",
			"check-catch",
			"check-else",
			"check-whitespace"
		],
		"prefer-const": true,
		"quotemark": [true, "single"],
		"radix": true,
		"semicolon": [true, "always"],
		"triple-equals": [true, "allow-null-check"],
		"typedef-whitespace": [
			true,
			{
				"call-signature": "nospace",
				"index-signature": "nospace",
				"parameter": "nospace",
				"property-declaration": "nospace",
				"variable-declaration": "nospace"
			}
		],
		"typeof-compare": true,
		"unified-signatures": true,
		"variable-name": false,
		"whitespace": [
			true,
			"check-branch",
			"check-decl",
			"check-operator",
			"check-separator",
			"check-type"
		],
		"directive-selector": [true, "attribute", "app", "camelCase"],
		"component-selector": [true, "element", "app", "kebab-case"],
		"use-input-property-decorator": true,
		"use-output-property-decorator": true,
		"use-host-property-decorator": true,
		"no-input-rename": true,
		"no-output-rename": true,
		"use-life-cycle-interface": true,
		"use-pipe-transform-interface": true,
		"component-class-suffix": true,
		"directive-class-suffix": true,
		"invoke-injectable": true
	}
}

Related: angular/angular-cli#7591

22 Answers

✔️Accepted Answer

You shouldn't import from 'rxjs' or 'rxjs/Rx' since either import will import the whole of rxjs which will dramatically increase the size of your bundle.

This should be changed in the docs to import { Observable } from 'rxjs/Observable ';

Other Answers:

@mlc-mlapis how big this overhead? I see that in RxJS6 they gonna change import format

// rxjs 6 alpha
import { Observable, Subject, ReplaySubject } from 'rxjs';
import { from, of, range } from 'rxjs/create';
import { map, filter, switchMap } from 'rxjs/operators';

// rxjs 5
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

it looks like a problem for me if we import operator-by-operator

I have included : import { Observable } from 'rxjs/Observable';
and import 'rxjs/add/operator/map';
but I still have the error for .map((res : Response ) => res.json())
Am using Ionic --v 3

More Issues: